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

后端未结

关注

 3  1391

I\'m implementing a AJAX autocomplete/autosuggest feature, and not only do I want to do the usual show suggestions that are similar to what the user typed, but I\'d like to let

相关标签:

3条回答

走了就别回头了

2021-02-01 11:14

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.

0 讨论(0)

礼貌的吻别

2021-02-01 11:26

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

0 讨论(0)

礼貌的吻别

2021-02-01 11:29
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...