jQuery UI autocomplete

By: Rajesh P.S.

jQuery UI Autocomplete is a feature-rich plugin that offers a search-as-you-type suggestion functionality for input fields. It's built on top of the jQuery library and provides a dynamic way to assist users in entering text by suggesting possible matches based on user input. Here are the details and examples to help you understand how jQuery UI Autocomplete works:

Installation

To use jQuery UI Autocomplete, you need to include the jQuery library and the jQuery UI library in your HTML file, similar to how you include them for other jQuery UI components.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Basic Usage

To create an autocomplete input, you need an HTML input element. You can then apply the autocomplete function to that input element.

Continue Reading...

<input type="text" id="autocomplete"> // Initialize the autocomplete $("#autocomplete").autocomplete({ source: ["Red", "Blue", "Green", "Yellow", "Brown"] });

Remote Data Source

Autocomplete can fetch suggestions from a remote data source, such as a server or an API, as the user types.

$("#autocomplete").autocomplete({ source: "/api/suggest", // URL to fetch suggestions from });

Minimum Characters

You can set a minimum number of characters required before autocomplete suggestions appear.

$("#autocomplete").autocomplete({ source: ["Willam", "Mac", "Charlie"], minLength: 2 // Show suggestions after typing at least 2 characters });

Customizing Display

You can customize how the suggestions are displayed in the dropdown menu.

$("#autocomplete").autocomplete({ source: ["Red Red", "Green Red", "Red Pie"], response: function(event, ui) { // Modify the response data before display ui.content = ui.content.map(item => ({ value: item, label: "Fruit: " + item })); } });

Select Event

You can define an event handler when an autocomplete suggestion is selected.

$("#autocomplete").autocomplete({ source: ["New York", "Los Angeles", "Chicago"], select: function(event, ui) { console.log("Selected city:", ui.item.value); } });

Custom Rendering

You can customize the rendering of suggestions using the _renderItem method.

$("#autocomplete").autocomplete({ source: ["Item A", "Item B", "Item C"], _renderItem: function(ul, item) { return $("<li>").append("<div>" + item.label + "</div>").appendTo(ul); } });

Browser View

jQuery UI Autocomplete Example

Type a color name:

Full Source | jQuery

<!DOCTYPE html> <html> <head> <title>jQuery UI Autocomplete Example</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { // Array of example suggestions var availableTags = ["Red", "Green", "Blue", "Yellow", "Brown"]; // Initialize the autocomplete $("#autocomplete").autocomplete({ source: availableTags }); }); </script> </head> <body> <h1>jQuery UI Autocomplete Example</h1> <p>Type a color name:</p>  <input type="text" id="autocomplete"> </body> </html>

Conclusion

jQuery UI Autocomplete is a jQuery plugin that enhances user input fields by providing real-time suggestions as users type. It suggests matching options based on input and allows customization of data sources, display rendering, and event handling, resulting in improved user experience and efficient data entry in web applications.

Next > Jquery UI Tabs

Related Topics

More Related Topics.....