ansaurus

Question

Ajax autocomplete (or autosuggest) with TAB completion/autofill similar to shell command line completion?

Answer 1

+1 A:

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.

CodeJoust 2009-12-09 06:13:47

Answer 2

+1 A:

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"&gt;
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  <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"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"&gt;&lt;/script&gt;
  <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

Matti 2009-12-13 14:37:15

Answer 3

+10 A:

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 autocompletion
function 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 index
function 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.

mislav 2009-12-13 19:36:26

This is awesome. Nice script.

Jeff Rupert 2009-12-16 16:35:16

ansaurus

tags:

views:

answers:

Ajax autocomplete (or autosuggest) with TAB completion/autofill similar to shell command line completion?

related questions