如何获得两列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");
});