How to Create Autocomplete on an Input Field using JQuery

How to create autocomplete on an input field using JQuery

Use of the Auto Complete for finding records for all records easily and quickly.

  • Its provide suggestion of words which are stored in our records according to input on text fields.
  • If we are enter ‘a’ the it show all word which contain ‘a’ and we enter j with a like ‘aj’ then it show all words which are contain ‘aj’ together.
  • There is live example code below
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
  $( function() {
    var MyRecords = [
      "Ajay",
      "Ajeet",
      "Amit",
      "Awadesh",
      "Avinash",
      "Abishek",
      "Jyoti",
      "Jitendra",
      "Janki",
      "Jacky",
      "Kapil",
      "Kavita",
      "Kinjal",
      "Kanchan",
      "Neeraj",
      "Omisen",
      "Omeswari",
      "Pooja",
      "Pradeep",
      "Prateek",
      "Rahul",
      "Ravindra",
      "Ritu",
      "Shubham",
      "Sonal",
      "Saubhagya",
      "Vimal"
       ];
    $( "#SearchRecord" ).autocomplete({
      source: MyRecords
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="SearchRecord">Search Record: </label>
  <input id="SearchRecord">
</div>
 </body>

17 Replies to “How to Create Autocomplete on an Input Field using JQuery”

  1. My wife and i have been absolutely more than happy when Edward managed to complete his researching through the entire precious recommendations he grabbed through the web site. It’s not at all simplistic to just choose to be releasing guidance which often others may have been trying to sell. We do understand we’ve got the blog owner to give thanks to for this. The entire explanations you’ve made, the straightforward website navigation, the friendships your site help create – it’s got many overwhelming, and it is letting our son in addition to our family recognize that the article is fun, which is certainly truly serious. Many thanks for the whole thing!

  2. I simply want to tell you that I am just newbie to blogs and actually savored your web blog. More than likely I’m planning to bookmark your blog post . You surely come with amazing articles. Many thanks for sharing with us your web site.

  3. I simply want to tell you that I am just all new to blogs and honestly enjoyed your web site. Probably I’m want to bookmark your website . You absolutely have amazing well written articles. With thanks for revealing your website.

Leave a Reply

Your email address will not be published. Required fields are marked *