Question

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

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

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

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

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

Answer 1

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

因此，我们假设我们还没有开箱即用的解决方案。嘘豪。编码有多难？

// 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 - 它应该在普通浏览器中运行。用于支持从prototype.js，jQuery或其他方式监听IE使用事件。

Answer 2

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

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

沿袭听取Tab键按Tab键时，触发选项卡：按下input.autotab

   $(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
       $('input.autotab').trigger('tab:press');
   });

将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; });
      }
  });

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

Answer 3

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

以下是插件主页的快速示例：

<!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>

更多内容见http://docs.jquery.com/Plugins/Autocomplete

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

3 个答案: