具有类似于shell命令行完成的TAB完成/自动填充的Ajax自动完成（或自动提示）？

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 the user do partial completions to save typing.

我正在实现一个AJAX自动完成/自动提示功能，我不仅要做与用户输入类似的常用显示建议，而且我想让用户进行部分完成以节省输入。

So, imagine my dictionary has these values in it: "green apple", "green pear", "green fruit", "blue sky", "blue water", "blue wake".

因此，想象一下我的词典中有这些价值：“青苹果”，“绿色梨”，“绿色水果”，“蓝天”，“蓝色水”，“蓝色唤醒”。

If the user types in "g", the suggestions should be "green apple", "green pear", "green fruit", and I'd like to let the user hit TAB or something to update his query to "green ", then they could type "a" and they'd get completed to "green apple".

如果用户输入“g”，建议应该是“青苹果”，“绿色梨”，“绿色水果”，我想让用户点击TAB或其他东西将他的查询更新为“绿色”，然后他们可以输入“a”，他们就会完成“青苹果”。

I'm trying to model this after linux shell command line completion.

我试图在linux shell命令行完成后对此进行建模。

Can you recommend a control/script that does this? Or a modification/customization of an existing control?

你能推荐一个这样做的控件/脚本吗？或者对现有控件进行修改/定制？

3 个解决方案

#1

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.

流行的自动完成插件（对于jQuery，Scripty ......）不支持这种特定类型的自动完成，因为通常这些插件提供了一个用于选择所需匹配的下拉UI。

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.

测试页面 - 它应该在普通的浏览器中工作。用于支持从use.js，jQuery或其他方面监听IE使用事件。

#2

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.

如果你使用jQuery，一个很棒的插件是http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/。只需使用css隐藏下拉框，并保持选项卡自动完成功能。

I think it would be simple to make a jquery plugin for yourself...

我认为为自己制作一个jquery插件会很简单......

Along the lines of Listen for the Tab Key When the tab key is pressed, trigger tab:press on input.autotab

沿着监听标签键的方式当按下标签键时，触发标签：按下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的选项卡：按事件（在每个循环中......如果focus == true等）到javascript数组查找或xhr请求（ajax），然后将该输入的值设置为返回的数据。

  $('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.

在autosuggest脚本中，一旦在数据库中匹配多次值，就将其写入（使用带索引的for循环，停止匹配第一个元素的索引元素），并将值返回到该点。

#3

The simplest way would be to just use the jQuery and the autocomplete plugin. Looking the the * 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.

最简单的方法是使用jQuery和autocomplete插件。看看* html，似乎他们正在使用相同的东西。对于大多数浏览器来说似乎工作得很好。该插件还有一个广泛的演示，可以帮助您找出如何根据您的特定需求实现它。

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

更多内容请点击此处http://docs.jquery.com/Plugins/Autocomplete

#1