Simple jQuery Combo Autocomplete Script

August 18, 2010 mike AutoComplete, jQuery, Scripts, 0

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:

/* 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 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:

/*
 * 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');
         }
    );
    
  });
};

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

* ---------------------

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 »</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:

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

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