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:
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:
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:
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
How to Rob a Home Run School is Cool? Mine Teacher Tell I Sew.