MIKESTOWE.COM

you are here

Simple jQuery Combo Autocomplete Script

Here is a really simple jQuery Combo (auto-fill/ url) Auto-Complete Script. The script is based on the Simple jQuery Autocomplete Script, and accepts returned values in a pipe-delimited (|), comma separated (,) format based on the variable “q” sent via GET.

To clarify, each record is separated by a pipe, with the return text and url separated by a comma.  For example:

Yahoo,http://www.yahoo.com|MSN,http://www.msn.com|CNN,http://www.cnn.com|Fox News,http://www.foxnews.com

Basic CSS:

CSS
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
/* The ComboSuggest Box */
.combosuggest {
width: 200px;
}
.combosuggest_inner {
width: 170px;
border: 1px solid #333;
border-bottom: none;
background: #fff;
}
/* ComboSuggest Links */
.combosuggest a {
display: block;
padding: 4px 3px 8px 4px;
color: #666;
font-size: 14px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #999;
}
/* ComboSuggest Links – Hover Effect */
.combosuggest a:hover {
background: #006699;
color: #fff;
}
.combosuggest .link {
position: absolute;
margin-top: -26px;
margin-left: 130px;
font-size: 9px;
font-weight: normal;
color: #666;
padding: 1px;
background: #EEEEEE;
border: 1px solid #333;
}
.combosuggest .link:hover {
background: #FF7F00;
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
54
55
56
57
58
59
60
61
62
/*
* Name: Simple jQuery Combo 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').combosuggest();< /script>
* ---------------------
* Changelog:
* ---------------------
* (c) 2010, http://www.mikestowe.com
*/
combosuggest_min_length = 3; // Minimum characters before running ajax check
jQuery.fn.combosuggest = function() {
return this.each(function(){
    var id = $(this).attr('id');
    var offset = $(this).offset();
    var left = offset.left + 82;
    if($(this).height() == 0) { var height = 30; } else { var height = $(this).height() + 5; }
    var top = offset.top + height;
    document.write('<div class="combosuggest" id="combosuggest_'+id+'" style="position: absolute; left: '+left+'px; top: '+top+'px; display: none;"></div>');
$(this).keyup(
function() {
                if($('#'+id).val().length > combosuggest_min_length) {
                $.ajax({
               url: $('#'+id).attr('rel'),
               data: {q: $('#'+id).val()},
               success: function(data) {
               if(data.length > 0) {
                        var ret = '<div class="combosuggest_inner">';
                        var pairs = data.split('|');
                        for(var i in pairs){
                            var info = pairs[i].split(',');
                            ret += '<a href="javascript: void(0);" onclick="$(\'#'+id+'\').val(\''+info[0]+'\'); $(\'#combosuggest_'+id+'\').hide();">'+info[0]+'</a>';
                            ret += '<a href="'+info[1]+'" onclick="$(\'#combosuggest_'+id+'\').hide();" target="_blank" class="link"><nobr>view &raquo;</nobr></a>';
                        }
                        ret += '</div>';
                        $('#combosuggest_'+id).html(ret).show();
                    } else {
                        $('#combosuggest_'+id).hide();
                    }
               }
                });
            } else {
                $('#combosuggest_'+id).hide();
            }
});
    
$(this).blur(
       function() {
           $('#combosuggest_'+id).hide('slow');
       }
);
});
};

And the HTML:

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

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

– 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 *