Simple jQuery AutoComplete Script

August 10, 2010 mike AutoComplete, jQuery, Scripts, 2

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:

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

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

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

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

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:

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

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