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:
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:
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 »</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:
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)
…
…
– note – sorry this isn’t more organized, threw the page together in just a few minutes. will update it and make it nicer later
Super Easy Form Highlighting Racism Part 2… Dr. Laura