Ajax 自动完成(或自动建议)与 TAB 完成/自动填充类似于 shell 命令行完成?

Posted

技术标签:

【中文标题】Ajax 自动完成(或自动建议)与 TAB 完成/自动填充类似于 shell 命令行完成?【英文标题】:Ajax autocomplete (or autosuggest) with TAB completion/autofill similar to shell command line completion? 【发布时间】:2010-12-22 16:38:58 【问题描述】:

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

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

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

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

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

【问题讨论】:

虽然我现在想不出一个彻底的解决方案,但我觉得 jQuery 可能是一个很好的入门方法。自动完成并不难,因为您始终可以将侦听器分配给特定的击键(TAB)。所以我个人的回答是肯定的。 我可以建议怎么做,但我不知道有一个控件来做。 嗯,一个可以定制的控件怎么样?我确信滚动你自己的基本自动完成并不难,但它是我担心的所有边缘情况:) Tab 可能是个问题,因为它通常会切换焦点,不是吗? @Moshe:我不这么认为,标签的***自动填充使用标签,例如如果你输入 py 并点击 tab 它会自动填充到 python。这与我正在寻找的内容相似,但我只想自动填充所有选项共有的字符数。 【参考方案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 — 它应该可以在普通浏览器中使用。用于支持 IE 使用来自prototype.js、jQuery 或其他的事件监听。

【讨论】:

这太棒了。不错的脚本。 测试页不再可用。 :( @TravisBear 和任何试图显示测试页面/演示的人:它已被 Internet 档案库 at this URL 保存。提示:要查找旧网页,请将 archive.org URL 添加到损坏的 URL,如下所示:https://web.archive.org/*/http://your-broken-url.com/nolongeravailable.html【参考方案2】:

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

我觉得自己做一个jquery插件会很简单...

沿着 听 Tab 键 当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 循环,在第一个元素匹配的索引元素处停止),然后将值返回到那一点。

【讨论】:

【参考方案3】:

最简单的方法是使用 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

【讨论】:

虽然我没有检查代码,但至少 that webpage 不支持 Q 要求的建议候选人的 补全。

以上是关于Ajax 自动完成(或自动建议)与 TAB 完成/自动填充类似于 shell 命令行完成?的主要内容,如果未能解决你的问题,请参考以下文章

没有数据建议的 jQuery 的 Ajax 自动完成

PDB 中的自动完成和 Tab 键

自动完成 jquery 多个字段 onchange 或 tab 事件

我的 Codeigniter 使用 ajax 自动完成

在 Asp.net Web 表单中向 ajax 自动完成功能添加两个值

jQueryUI 自动完成返回 AJAX 错误 0 当用户点击回车