如何获得两列jquery自动完成？

Question

我有两个列表要搜索我网站上的自动完成框。一个是商店列表，另一个是其他人为产品做的搜索列表。我想自动完成显示两列，第一列为第一个搜索集，另一列为另一个搜索集。

例如，搜索鞋的人应该在左侧列表中看到“鞋子，无用的鞋子，鞋子等......”，然后在第二栏中看到“鞋子，鞋子，鞋架，鞋油等......”。

我该怎么做？

Answer 1

我怀疑这样的事情已经存在。您可以做的是在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");
});

Answer 2

您可以在第二个输入中触发搜索（隐藏）...这是我放在一起的内容（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();
  }
});

Answer 3

我有一个略有不同的想法，我现在不能为编写代码而感到困扰（从凌晨2点开始），但生病了给你的概念：

（我假设您正在使用JqueryUI.autocomplete）

所以你需要拦截创建事件（查看JqueryUI自动完成中类别部分的文档来解决这个问题）。

所以在创建事件上你要在div里面添加两个div，即自动完成栏/窗口/无论如何都要用宽度浮动它们：50％;然后当你检索值（通过ajax）检查一个“类别”（即listLeft或listRight），然后使用.append相应地添加到每个列表，并确保你给他们autocmpleteButton类或其所谓的。

图形表示：