如何使用 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 原生解決方案？ 或者是否有特定的圖書館可以做到這一點？ 任何建議或解決方案表示贊賞，提前致謝！

Answer 1

您可以使用 Jquery autocomplete() 函數

這是鏈接https://jqueryui.com/autocomplete/

$( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure"}

Answer 2

試試這個：

  <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>jQuery UI Autocomplete - Default functionality</title>
          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
          <script>
             $(document).ready(function(){
            // Defining the local dataset
            $.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
              console.log(data)
            $( "#tags" ).autocomplete({
              source: data
            });
            });
        });
          </script>
        </head>
        <body>

        <div class="ui-widget">
          <label for="tags">Tags: </label>
          <input id="tags">
        </div>


        </body>
        </html>

Answer 3

您可以使用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>

如何使用 Jquery 創建自動完成功能？

問題描述

3 個解決方案

解決方案1
1 2020-02-19 13:00:30

解決方案2
1 2020-02-19 13:04:42

解決方案3
1 已采納 2020-02-19 13:17:38

如何使用 Jquery 創建自動完成功能？

問題描述

3 個解決方案

解決方案1 1 2020-02-19 13:00:30

解決方案2 1 2020-02-19 13:04:42

解決方案3 1 已采納 2020-02-19 13:17:38

解決方案1
1 2020-02-19 13:00:30

解決方案2
1 2020-02-19 13:04:42

解決方案3
1 已采納 2020-02-19 13:17:38