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

Question

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

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

我该怎么做？

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");
});