I have been using the JQuery library for a long time now, and am still amazed at what people get it to do. One feature that the base libaray was really lacking was a good Autosuggest for a text input. It needed to be AJAX driven, and understand having multiple values.
I found a great example of what I wanted at Drew Wilson’s blog, complete with almost all the features I needed.
One thing his script is really lacking is a good way to show ALL the results. We have a huge category list, and want to let someone browse them all. In the base script, this isn’t going to work, since there isnt a way to make the look up fire off without input. I didnt want my users to have to enter in, one by one, each letter of the alphabet looking for what they wanted, so I settled on using a double click event to force the display of the entire list.
And here is how to make that happen:
In the js file (jquery.autoSuggest.js) you will need to make some changes.
~line 149 add:
}).dblclick(function(){
if (timeout){ clearTimeout(timeout); }
timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay);
so it will look like:
}).blur(function(){
if($(this).val() == "" && values_input.val() == "" && prefill_value == ""){
$(this).val(opts.startText);
} else if(input_focus){
$("li.as-selection-item", selections_holder).addClass("blur").removeClass("selected");
results_holder.hide();
}
}).dblclick(function(){
if (timeout){ clearTimeout(timeout); }
timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay);
}).keydown(function(e) {
This will pull up a list on double click. You can change dlbclick to just click for a single click response instead.
~line 226 comment out the lines:
if( lastKeyPressCode == 46 || (lastKeyPressCode > 8 && lastKeyPressCode < 32) ){ return results_holder.hide(); }
and
if (string == prev) return;
and
if (string.length >= opts.minChars) {
and then on ~line 252 comment out
} else {
selections_holder.removeClass("loading");
results_holder.hide();
}
You will also want to turn the option “resultsHighlight” false, when you create the instance.
Now, on double click it will present a full list of options.
Related articles
- Weekly Freebies: 10 Brilliant jQuery Plugins (designshack.co.uk)
- jQuery 1.4.4 fadeToggle() function (devcurry.com)
- jQuery Roundrr – How To Create Awesome Circular Image Galleries With jQuery & CSS (addyosmani.com)
- Use jQuery to Scroll to Bottom or Top of a Page (devcurry.com)
- JQuery 1.5 promises a better future. (renesd.blogspot.com)
