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

StackOverflow https://stackoverflow.com/questions/1837555

题

我实现一个AJAX自动完成/自动提示功能，而不是只做我想做的通常显示建议，类似于用户键入的内容，但我想，让用户做局部的完成，以节省打字。

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

如果在“G”，建议应该是“青苹果”，“绿色梨”，“绿色水果”，我想，让用户按下Tab键或东西的用户类型来更新他的查询“绿色”，那么他们可以键入‘A’，他们会得到完成，以‘青苹果’。

我试图Linux shell命令行完成之后建模。

你能不能推荐一个控制/脚本，做这个？或修改/现有的控制的定制

有帮助吗？

解决方案

自动完成这种特定类型的未受欢迎的自动完成插件（jQuery的，指令码...）支持，因为通常是那些提供用于选择想要的匹配下拉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的或收听其他

其他提示

如果您使用jQuery，一个伟大的插件 http://bassistance.de / jQuery的插件/ jQuery的插件，自动完成/ 。 只需使用CSS来隐藏下拉框，并在离开选项卡，自动完成功能。

我认为这将是简单的做一个jQuery插件留给自己......

沿着线       听Tab键       当tab键被按下时，触发选项卡：按上input.autotab 

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

绑定input.autotab的选项卡：按压事件（在每个循环...如果焦点== 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循环与一个索引，在所述第一元件相匹配的索引元件停止），并返回值高达这一点。

的最简单的方法是只使用jQuery和自动完成插件。展望计算器的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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top