Ich erstelle eine Django-Site. Auf einer bestimmten Vorlage habe ich ein Ajax-Formular hinzugefügt und möchte eine Funktion zur automatischen Vervollständigung hinzufügen, um die Navigation zu vereinfachen.

Mein Hauptproblem ist, dass die Daten, die ich durchsuchen sollte, ein JSON-Array von Objekten sind, während die meisten Lösungen, die ich gefunden habe, mit normalen Arrays funktionieren.

Folgendes habe ich jetzt:

<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'>

So sehen die Daten aus, es sind ungefähr 700 Datensätze; Hier sind die ersten drei:

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

Ich brauche das, um so schnell wie möglich zu sein. Gibt es dafür eine native JQuery / Ajax-Lösung? Oder gibt es dafür eine bestimmte Bibliothek? Jeder Rat oder jede Lösung wird geschätzt, danke im Voraus!

1
Jack022 19 Feb. 2020 im 15:52

3 Antworten

Beste Antwort

Sie können das jQuery Typeahead Search -Plugin verwenden. Richten Sie einfach Ihr Formular ein, um die richtige Verschachtelung von Klassen zu verwenden (siehe unten).

$(() => {
  //$.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>
1
Mr. Polywhirl 19 Feb. 2020 im 13:17

Probier diese:

  <!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>
1
Amandeep Singh 19 Feb. 2020 im 13:04

Sie können die Funktion Jquery autocomplete () verwenden

Hier ist der Link https://jqueryui.com/autocomplete/

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

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



1
Priya Purushoth 19 Feb. 2020 im 13:00