How to Create JQuery Autocomplete Text Box With Example
JavaScript adds life to the UI of online applications and web forms. 💫
You can use JS to create highly interactive online experiences, which would have been challenging using HTML & CSS solely. The jQuery UI library boasts plenty of interactions, widgets, themes, effects, and utilities that you can readily use. One such useful widget is jQuery Autocomplete.
Think about how Google saves your time with autocomplete suggestions while searching online.
jQuery Autocomplete can help you implement similar functionality in your web app or form. Offering such functionality to the users can help you:
- Smoothen User Experience
- Reduce Cognitive Demand
- Avoid Typing Mistakes
You can use the jQuery Autocomplete widget with the HTML elements: textbox, textarea, and input. It is triggered on a key-up event and shows the autocomplete suggestions to the users whenever they type something in the field.
In this blog post, I am going to show you jQuery Autocomplete textbox select example through array and database. 😃
jQuery Autcomplete Example + Code
In this example, I’ve used the jQuery Autocomplete widget to fetch suggestions for the states and territories of the United States. The function will be triggered when you start typing in the text box. For example, on typing the letters ‘al’ in the textbox, the jQuery Autocomplete widget searches the entire array or database (if connected) and fetches all the matching results that contain the entered text, which are ‘Alabama’ and ‘Alaska’ in this case.
In the above example, I used an array to declare the list of all the states & territories of the United States. You can take the following code for reference:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!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.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { var availableStates = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Washington", "West Virginia", "Wisconsin", "Wyoming" ]; $( "#states" ).autocomplete({ source: availableStates }); } ); </script> </head> <body> <div class="ui-widget"> <label for="states">State: </label> <input id="states"/> </div> </body> </html> |
jQuery Autocomplete From Database
Instead of using an array, you can also set database as a source for showing autocomplete suggestions. For example, I used the below code to fetch the jQuery autocomplete from the database using JSON encoding:
|
1 2 3 4 5 6 7 8 |
var availableProducts = <?php echo json_encode($products);?>; $(document).on('focusout keyup', '.invoice_item', function (index, value) { boxId = jQuery(this).attr('id'); $("#"+boxId).autocomplete({ source: availableProducts, }); }); |
If you still have doubts regarding this solution, you can mention them in the comments; I’d be glad to help you! 😇
Earlier, my colleague showed you a method to reload current page without losing any form data through JavaScript, which you’d like to implement in your web app or form.
Loved this post? Rate it with 5 stars and share it with your techie friends! 😃
Thanks for reading! 🍀
Prev
35+ Best Digital Marketing Tools for 2024 [Free & Premium]
Rajasthan Diaries: Meetanshi’s Trip to Udaipur & Kumbhalgarh
Next