javascript - 如何使用 Jquery 创建自动完成功能？

Question

我正在创建一个 Django 网站，在某个模板上我添加了一个 Ajax 表单，并且我想添加一个自动完成功能，以便使导航更容易。

我的主要问题是我应该搜索的数据是对象的 JSON 数组，而我发现的大多数解决方案都适用于普通数组。

这是我现在拥有的:

<script>
    $(document).ready(function(){
        // Defining the local dataset
        $.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
          console.log(data)
          //Autocomplete
        });
    });
</script>   

<input type="text" id='firstfield' name='input_val'>

这就是数据的样子，大约有 700 条记录；这是前三个:

"results": [
        {
            "item": "First",
            "id": "1847",
        },
        {
            "item": "Second",
            "id": "4442",
        },
        {
            "item": "Third",
            "id": "3847",
        }]

我需要尽可能快。有 JQuery/Ajax native 解决方案吗？或者有一个特定的库可以做到这一点？任何建议或解决方案表示赞赏，提前致谢!

Answer 1

您可以使用jQuery Typeahead Search插入。只需设置您的表单以使用正确的类嵌套，如下所示。

$(() => {
  //$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
  let data = {
    "results": [
      { "item": "First",  "id": "1847" },
      { "item": "Second", "id": "4442" },
      { "item": "Third",  "id": "3847" }
    ]
  };
  $('#first-field').typeahead({
    source: {
      data: data.results.map(record => record.item)
    },
    callback: {
      onInit: function($el) {
        console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
      }
    }
  });
  //})
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<h1>jQuery Typeahead</h1>
<form>
  <div class="typeahead__container">
    <div class="typeahead__field">
      <div class="typeahead__query">
        <input id="first-field" name="first-field" placeholder="Search" autocomplete="off">
      </div>
      <div class="typeahead__button">
        <button type="submit"><i class="typeahead__search-icon"></i></button>
      </div>
    </div>
  </div>
</form>