当前位置：文江博客话题详情

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

发布于 2024-08-12 20:29:07 字数 317 浏览 5 评论 0原文

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

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

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

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

您能推荐一个可以执行此操作的控件/脚本吗？或者对现有控件进行修改/定制？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜未央樱花落 2024-08-19 20:29:07

流行的自动完成插件（例如 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 或其他的事件监听。

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.

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.

回复收藏 0 原文

梦在夏天 2024-08-19 20:29:07

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

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

沿着以下路线
监听 Tab 键
当按下 tab 键时，在 input.autotab 上触发 tab:press

   $(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 循环，在第一个元素匹配的索引元素处停止），就将其写入，并返回到该点的值。

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.

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

Along the lines of
Listen for the Tab Key
When the tab key is pressed, trigger tab:press on 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').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.

回复收藏 0 原文

ぃ双果 2024-08-19 20:29:07

最简单的方法是使用 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 /插件/自动完成

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

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

回复收藏 0 原文

~没有更多了~