Ajax autocomplete (or autosuggest) with TAB completion/autofill similar to shell command line completion?
This specific type of autocompletion isn't supported in popular autocompletion plugins (for jQuery, Scripty...) because usually those provide a drop-down UI for choosing the wanted match.
So let's suppose we haven't got an out-of-the-box solution. Boo-ho. How hard can it be to code it up?
// takes a text field and an array of strings for autocompletionfunction autocomplete(input, data) { if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) { var candidates = [] // filter data to find only strings that start with existing value for (var i=0; i < data.length; i++) { if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length) candidates.push(data[i]) } if (candidates.length > 0) { // some candidates for autocompletion are found if (candidates.length == 1) input.value = candidates[0] else input.value = longestInCommon(candidates, input.value.length) return true } } return false}// finds the longest common substring in the given data set.// takes an array of strings and a starting indexfunction longestInCommon(candidates, index) { var i, ch, memo do { memo = null for (i=0; i < candidates.length; i++) { ch = candidates[i].charAt(index) if (!ch) break if (!memo) memo = ch else if (ch != memo) break } } while (i == candidates.length && ++index) return candidates[0].slice(0, index)}Test page here — it should work in normal browsers. For supporting IE use event listening from prototype.js, jQuery or other.
If your using jQuery, a great plugin is http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.Simply use css to hide the dropdown box, and leave the tab-auto-complete functionality on.
I think it would be simple to make a jquery plugin for yourself...
Along the lines of Listen for the Tab Key When the tab key is pressed, trigger tab:press on input.autotab
$(document).keydown(function(e){ if (e.keyCode = (tab-key?)){ $('input.autotab').trigger('tab:press'); }); Bind input.autotab's tab:press event (in an each loop... if focus==true etc.) to either a javascript array lookup, or a xhr request, (ajax), then set that input's value as the returned data.
$('input.autotab').bind('tab:press', function(){ if (this.hasFocus){ this.disabled = true; $.get('/autotab', { q: $(this).val() }, function(response){ $(this).val(response); this.disabled = false; }, function(){ this.disabled = false; }); } });In your autosuggest script, write it so once the value is matched more than once in the database (use a for loop with an index, stopping at the index element where the first element is matched), and return the value up to that point.
The simplest way would be to just use the jQuery and the autocomplete plugin. Looking the the stackoverflow html, it seems that they are using the same stuff. Seems to work very well for most browsers. The plugin also has an extensive demo that should help you figure out how to implement it to your specific needs.
Here's a quick sample from the plugin home page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <script src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" /> <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> <script> $(document).ready(function(){ var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" "); $("#example").autocomplete(data); }); </script></head><body> API Reference: <input id="example" /> (try "C" or "E")</body></html>More to be found here http://docs.jquery.com/Plugins/Autocomplete