Question posted in
You can find the official documentation here.

How can i create an autocomplete with Jquery? – Jquery ajax

I’m creating a Django site, on a certain template i added an Ajax form and i would like to add an autocomplete feature, in order to make navigation easier.

My main problem is that the data i should search is a JSON array of objects, while most of the solutions i found work with normal arrays.

Here is what i have now:

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

This is what the data looks like, it’s around 700 records; here are the first three:

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

I need this to be as fast as possible. Is there a JQuery/Ajax native solution for this? Or is there a specific library to do this? Any advice or solution is appreciated, thanks in advance!

Tags:

3

Answers


  1. 0

    You can use Jquery autocomplete() function

    Here is the link
    https://jqueryui.com/autocomplete/

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

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure"}
    Login or Signup to reply.
  2. 0

    Try this one:

      <!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>
    Login or Signup to reply.
  3. 0

    You could use the jQuery Typeahead Search plugin. Just set-up your form to use the proper nesting of classes as seen below.

    $(() => {
  //$.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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search