jquery

Autocomplete using jQueryUI

<html lang="en">
<head>
  <link rel="stylesheet" href="path_to_jquery_ui_lib/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="path_tojqueryui_lib/jquery-ui.js"></script>
  <script>
  $( function() {
    //SEARCH INTO LOCAL ARRAY LIST
    var fruits = [
      "Apple", "Orange", "Banana", "Papaya"
    ];
    $( "#autocomplete_input" ).autocomplete({
      source: fruits
    });


    //IF YOU WANT TO LOAD THE LIST FROM THE SERVER USE BELOW CODE
    // API RETURNS JSON - [{"id": "23", "label": "label name", "property1": "value1"}]
    $( "#autocomplete_input" ).autocomplete({
        source: "/api/get_items_api.php",
        minLength: 2, //MINIMUM CHARACTERS REQUIRED FOR SEARCH
        select: function( event, ui ) {
            console.log(ui.item.property_name);
        }
    });
  });
  </script>
</head>
<body>
 
  <div class="ui-widget">
     <label for="tags">Autocomplete jQueryUI: </label>
     <input id="autocomplete_input">
  </div>
</body>
</html>

The code can be used to implement autocomplete functionality on your website using jQueryUI. You can make that by providing local list array to the 'source' property of 'autocomplete' function or you can also load the list from the server by providing API URL path to 'source'. Remember that it will find 'label' and 'id' property by default to plot the list.

Download required files

Was this helpful?