8

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

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

如果用户输入“g”，建议应该是“green apple”、“green pear”、“green fruit”，我想让用户点击 TAB 或其他东西来将他的查询更新为“green”，然后他们可以输入“a”，他们将完成“青苹果”。

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

您能推荐一个执行此操作的控件/脚本吗？还是对现有控件的修改/自定义？

4

3 回答 3

22

流行的自动完成插件（用于 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)
}

测试页面在这里——它应该在普通浏览器中工作。为了支持 IE 使用来自prototype.js、jQuery 或其他的事件监听。

于 2009-12-13T19:36:26.633 回答
3

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

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

沿着 Listen for the Tab Key 的行当按下 tab 键时，触发 tab:press on input.autotab

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

将 input.autotab 的 tab:press 事件（在每个循环中......如果 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; });
      }
  });

在您的自动建议脚本中，一旦值在数据库中匹配多次（使用带有索引的 for 循环，在第一个元素匹配的索引元素处停止），然后将值返回到该点。

于 2009-12-09T06:13:47.420 回答
1

最简单的方法是只使用 jQuery 和自动完成插件。查看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

于 2009-12-13T14:37:15.400 回答