MIKESTOWE.COM

you are here

Simple jQuery AutoComplete Script

Here is a really simple jQuery Auto-Complete Script. The script has four simple components; CSS, JavaScript, an HTML/ Action Call component, and of course the dynamic page that returns values in pipe-delimited (|) format based on the variable “q” sent via GET.

Basic CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* The AutoSuggest Box */
.autosuggest {
border: 1px solid #333;
background: #fff;
}
/* AutoSuggest Links */
.autosuggest a {
display: block;
padding: 3px;
color: #333;
}
/* AutoSuggest Links - Hover Effect */
.autosuggest a:hover {
background: #333;
color: #fff;
}

The JavaScript:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*
* Name: Simple jQuery AutoComplete
* Author: Michael Stowe
* Version 1.0
* ---------------------
* Sends user input via "GET" to a dynamic page with a "q" query, and then takes the
* pipe-delimited text and returns it as a clickable dropdown list.
* ---------------------
* Example:
* <input type="text" name="example" id="example" rel="use_this_page_for_results.php" />
* <script language="javascript">$('#example').autosuggest();< /script>
* ---------------------
* Changelog:
* ---------------------
* (c) 2010, http://www.mikestowe.com
*/
autosuggest_min_length = 3; // Minimum characters before running ajax check
jQuery.fn.autosuggest = function() {
return this.each(function(){
    var id = $(this).attr('id');
    var offset = $(this).offset();
    var left = offset.left;
    if($(this).height() == 0) { var height = 30; } else { var height = $(this).height() + 5; }
    if($(this).width() == 0) { var width = 200; } else { var width = $(this).width() + 5; }
    var top = offset.top + height;
    document.write('<div class="autosuggest" id="autosuggest_'+id+'" style="position: absolute; left: '+left+'px; top: '+top+'px; width: '+width+'px; display: none;"></div>');
$(this).keyup(
function() {
                if($('#'+id).val().length > autosuggest_min_length) {
                $.ajax({
               url: $('#'+id).attr('rel'),
               data: {q: $('#'+id).val()},
               success: function(data) {
               if(data.length > 0) {
                        var ret = '';
                        var pairs = data.split('|');
                        for(var i in pairs){
                            ret += '<a href="javascript: void(0);" onclick="$(\'#'+id+'\').val(\''+pairs[i]+'\'); $(\'#autosuggest_'+id+'\').hide();">'+pairs[i]+'</a>';
                        }
                        $('#autosuggest_'+id).html(ret).show();
                    } else {
                        $('#autosuggest_'+id).hide();
                    }
               }
                });
            } else {
                $('#autosuggest_'+id).hide();
            }
});
});
};

And the HTML:

XHTML
1
2
Your Favorite Color: <input type="text" name="example" id="color" rel="colors.php">
<script language="javascript">$('#color').autosuggest();</script>

Required HTML Attributes:
ID: the text input must have an unique id
REL: the relation attribute is used to determine what page to send the query to (URL)

Simple AutoComplete  (click to download)
Simple jQuery Plugin to AutoComplete text based on AJAX
version: 1.0
size: 1.81kb

– note – sorry this isn’t more organized, threw the page together in just a few minutes. will update it and make it nicer later :)

Share this Page:
Facebook Twitter Linkedin Reddit Tumblr Email

Leave a Reply

Your email address will not be published. Required fields are marked *