Как я могу создать автозаполнение с Jquery? - PullRequest
Новая
       1

Как я могу создать автозаполнение с Jquery?

0 голосов
/ 19 февраля 2020

Я создаю сайт 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? Или для этого есть специальная библиотека c? Любой совет или решение приветствуется, спасибо заранее!

Ответы [ 3 ]

1 голос
/ 19 февраля 2020

Попробуйте это: 

  <!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 голос
/ 19 февраля 2020

Вы можете использовать плагин 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>
1 голос
/ 19 февраля 2020

Вы можете использовать функцию Jquery autocomplete ()

Вот ссылка https://jqueryui.com/autocomplete/

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

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure"}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...