如何获得两列 jquery 自动完成功能？答案

【问题标题】：How do I get a two column jquery autocomplete?如何获得两列 jquery 自动完成功能？
【发布时间】：2011-11-24 01:13:37
【问题描述】：

我有两个要在我的网站上搜索自动完成框的内容列表。一个是商店列表，另一个是其他人对产品进行的搜索列表。我希望自动完成显示两列，一列用于第一个搜索集，另一列用于另一个搜索集。

例如，搜索鞋子的人应该在左侧列表中看到“shoebuy、payless shoes、shoemall 等...”，然后在第二列中看到“鞋子、鞋子、鞋架、鞋油等”。

我该怎么做？

【问题讨论】：

到目前为止，我已经尝试查看 jquery 自动完成文档，但在那里找不到可能...我想看看其他人是否使用简单的库扩展完成了它，或者是否存在另一个库做更深入的自动完成。
我怀疑你会得到这个现成的，虽然我可能错了。您可能必须采用现有的自动完成库并对其进行扩展以满足您的目的。方法可能是，自动完成将查询发送到服务器端组件。服务器端组件将搜索您的数据源 - 商店和其他搜索 - 并返回一个包含两个结果的 json 对象，即包含商店名称列表的商店对象和包含旧搜索字符串列表的 oldSearches 对象。自动完成库将解析响应并以您想要的方式将其绘制在 UI 上。
服务器端部分没问题。。其实已经写好了，数据可以转换成合适的格式。。。只是想看看如何轻松覆盖自动完成里面的菜单对象或使用整个附加库来显示 2 列数据。
你在使用 jQueryUI 的自动完成功能吗？如果是这样，这可能是可能的......
你觉得这个 Zak 怎么样？

标签： jquery autocomplete jquery-autocomplete

【解决方案1】：

您可以在第二个输入（隐藏）中触发搜索...这是我放在一起的内容（demo）：

HTML

var stores = [
    'shoes',
    'shoes!',
    'shoebuy',
    'payless shoes',
    'shoemall',
    'shoes galore'
  ],
  searches = [
    'shoe',
    'shoes',
    'shoe rack',
    'shoe polish',
    'shoe horn'
  ],
  storeBox = $('#stores'),
  searchBox = $('#searches'),
  closeDropdowns = function() {
    searchBox.autocomplete('close');
    storeBox.autocomplete('close');
  };

storeBox.autocomplete({
  source: stores,
  search: function(event, ui) {
    // initiate search in second autocomplete with the same value
    searchBox.autocomplete('search', this.value);
  },
  select: function() {
    closeDropdowns();
  },
  close: function() {
    closeDropdowns();
  }
});

searchBox.autocomplete({
  source: searches,
  select: function(event, ui) {
    storeBox.val(ui.item.value);
    searchBox.autocomplete('close');
    storeBox.autocomplete('close');
  },
  close: function() {
    closeDropdowns();
  }
});

【讨论】：

我知道这是不久前发布的，但我正在使用此脚本并且无法关闭第二个框。有什么建议吗？
对不起，我没有说清楚，当我删除输入字段的内容时，第二个菜单没有关闭。
感谢您的帮助。效果很好！
嗨，Mottie，很抱歉，向结果添加 html 支持的最佳方式是什么？说到 jQuery，我仍然是个业余爱好者。

【解决方案2】：

我有一个稍微不同的想法，我现在懒得写代码（从凌晨 2 点开始），但我给你这个概念：

（我假设您使用 JqueryUI.autocomplete）

因此您需要拦截创建事件（查看 JqueryUI 自动完成中的类别部分的文档以了解这一点）。

因此，在创建事件中，您希望在 div 内部添加两个 div，即自动完成栏/窗口/任何内容，并以宽度：50%; 浮动它们。然后当您检索值时（通过 ajax）检查“类别”（即 listLeft 或 listRight），然后使用 .append 相应地添加到每个列表中，并确保为它们提供 autocompleteButton 类或任何其调用的类。

图形表示：

【讨论】：

【解决方案3】：

我怀疑这样的事情已经存在。您可以做的是在 div 中创建一个 CSS 两列布局，该布局在文本字段更改时显示在该字段下。这样，即使使用相同的 AJAX 请求，您也可以单独填充每一列：

<input id="autocompleteField" type="text" />
<div class="autocomplete">
<div class="autoLeft"></div>
<div class="autoRight"></div>
</div>

$("#autocompleteField").change(function () {
  $.get("url", $(this).val(), function(response) {
    $(".autoLeft").html(response.left);
    $(".autoRight").html(response.right);
  }, "json");
});

【讨论】：