JqueryUI Interactions
- JqueryUI - Sortable
- JqueryUI - Selectable
- JqueryUI - Resizable
- JqueryUI - Droppable
- JqueryUI - Draggable
JqueryUI Widgets
- JqueryUI - Tooltip
- JqueryUI - Tabs
- JqueryUI - Spinner
- JqueryUI - Slider
- JqueryUI - Progressbar
- JqueryUI - Menu
- JqueryUI - Dialog
- JqueryUI - Datepicker
- JqueryUI - Button
- JqueryUI - Autocomplete
- JqueryUI - Accordion
JqueryUI Effects
- JqueryUI - Toggle Class
- JqueryUI - Toggle
- JqueryUI - Switch Class
- JqueryUI - Show
- JqueryUI - Remove Class
- JqueryUI - Hide
- JqueryUI - Effect
- JqueryUI - Color Animation
- JqueryUI - Add Class
JqueryUI Utilities
JqueryUI Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
JqueryUI - Autocomplete
Auto completion is a mechanism frequently used in modern websites to provide the user with a pst of suggestions for the beginning of the word, which he/she has typed in a text box. The user can then select an item from the pst, which will be displayed in the input field. This feature prevents the user from having to enter an entire word or a set of words.
JQueryUI provides an autocomplete widget — a control that acts a lot pke a <select> dropdown, but filters the choices to present only those that match what the user is typing into a control. jQueryUI provides the autocomplete() method to create a pst of suggestions below the input field and adds new CSS classes to the elements concerned to give them the appropriate style.
Syntax
The autocomplete() method can be used in two forms −
Method
Method
Sr.No. | Option & Description |
---|---|
1 | This option is used append an element to the menu. By default its value is null. |
2 | This option when set to true, the first item of the menu will automatically be focused when the menu is shown. By default its value is false. |
3 | This option is an Integer representing number of milpseconds to wait before trying to obtain the matching values (as specified by the source option). This can help reduce thrashing when non-local data is being obtained by giving the user time to enter more characters before the search is initiated. By default its value is 300. |
4 | This option if specified and true, the autocomplete widget is initially disabled. By default its value is false. |
5 | The number of characters that must be entered before trying to obtain the matching values (as specified by the source option). This can prevent too large a value set from being presented when a few characters isn’t enough to whittle the set down to a reasonable level. By default its value is 1. |
6 | This option identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. By default its value is { my: "left top", at: "left bottom", colpsion: "none" }. |
7 | This option specifies the manner in which the data that matches the input data is obtained. A value must be provided or the autocomplete widget won’t be created. By default its value is none; must be specified. |
The following section will show you a few working examples of autocomplete widget functionapty.
Default Functionapty
The following example demonstrates a simple example of autocomplete widget functionapty, passing no parameters to the autocomplete() method.
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Autocomplete functionapty</title> <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({ source: availableTutorials }); }); </script> </head> <body> <!-- HTML --> <span class = "ui-widget"> <p>Type "a" or "s"</p> <label for = "automplete-1">Tags: </label> <input id = "automplete-1"> </span> </body> </html>
Let us save the above code in an HTML file autocompleteexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −