Api Autocomplete

# jQuery UI API – Autocomplete Widget ## Category (#) ## Usage **Description:** The Autocomplete widget searches and filters based on user input, allowing users to quickly find and select from a predefined list of values. **Added in:** 1.8 Any field that can receive input can be converted to an Autocomplete, i.e., `` elements, `

` elements, and elements with the `contenteditable` attribute.

By giving focus to the Autocomplete field or typing characters into it, the plugin begins searching for matching entries and displays a list of values to choose from. By typing more characters, the user can filter the list for better matches.

This widget can be used to select previously selected values, such as typing article tags or entering email addresses from an address book. Autocomplete can also be used to populate related information, such as typing a city name to get its postal code.

You can get data from a local source or a remote source: local sources are suitable for small datasets, such as an address book with 50 entries; remote sources are suitable for large datasets, such as a database with hundreds or thousands of entries. For more information on custom data sources, see the documentation for the [`source`](#) option.

### Keyboard Interaction

When the menu is open, the following keyboard commands are available:

*   UP - Moves focus to the previous item. If on the first item, moves focus to the input. If on the input, moves focus to the last item.
*   DOWN - Moves focus to the next item. If on the last item, moves focus to the input. If on the input, moves focus to the first item.
*   ESCAPE - Closes the menu.
*   ENTER - Selects the currently focused item and closes the menu.
*   TAB - Selects the currently focused item, closes the menu, and moves focus to the next focusable element.
*   PAGE UP/DOWN - Scrolls one screen of items (based on the menu's height).

When the menu is closed, the following keyboard commands are available:

*   UP/DOWN - Opens the menu if [`minLength`](#) is satisfied.

### Theming

The Autocomplete widget uses the (#) to define its look and feel. To style the Autocomplete specifically, you can use the following CSS class names:

*   `ui-autocomplete`: The (#) that displays matching items for the user.
*   `ui-autocomplete-input`: The input element that the Autocomplete widget is instantiated on.

### Dependencies

### Additional Notes

*   This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.
*   This widget manipulates the element's value programmatically, so the native `change` event is not triggered when the element's value changes.

### Quick Navigation

| Options | Methods | Extension Points | Events |
| --- | --- | --- | --- |
| (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) (#) (#) (#) (#) | (#) (#) (#) | (#) (#) (#) (#) (#) (#) (#) (#) |

| Option | Type | Description | Default |
| --- | --- | --- | --- |
| appendTo | Selector | Which element the menu should be appended to. When the value is `null`, the parent of the input field is checked for a `ui-front` class. If an element with the `ui-front` class is found, the menu is appended to that element. If no element with the `ui-front` class is found, the menu is appended to the body, regardless of the value. **Note: The `appendTo` option should not be changed while the suggestion menu is open.** **Code examples:** Initialize the autocomplete with the `appendTo` option specified: $( ".selector" ).autocomplete({ appendTo: "#someElem" }); Get or set the `appendTo` option after initialization: // gettervar appendTo = $( ".selector" ).autocomplete( "option", "appendTo" ); // setter $( ".selector" ).autocomplete( "option", "appendTo", "#someElem" ); | null |
| autoFocus | Boolean | If set to `true`, the first item will be automatically focused when the menu is displayed. **Code examples:** Initialize the autocomplete with the `autoFocus` option specified: $( ".selector" ).autocomplete({ autoFocus: true }); Get or set the `autoFocus` option after initialization: // gettervar autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" ); // setter $( ".selector" ).autocomplete( "option", "autoFocus", true ); | false |
| delay | Integer | The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while also decreasing responsiveness. **Code examples:** Initialize the autocomplete with the `delay` option specified: $( ".selector" ).autocomplete({ delay: 500 }); Get or set the `delay` option after initialization: // gettervar delay = $( ".selector" ).autocomplete( "option", "delay" ); // setter $( ".selector" ).autocomplete( "option", "delay", 500 ); | 300 |
| disabled | Boolean | If set to `true`, disables the autocomplete. **Code examples:** Initialize the autocomplete with the `disabled` option specified: $( ".selector" ).autocomplete({ disabled: true }); Get or set the `disabled` option after initialization: // gettervar disabled = $( ".selector" ).autocomplete( "option", "disabled" ); // setter $( ".selector" ).autocomplete( "option", "disabled", true ); | false |
| minLength | Integer | The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be set when a single character search could match thousands of items. **Code examples:** Initialize the autocomplete with the `minLength` option specified: $( ".selector" ).autocomplete({ minLength: 0 }); Get or set the `minLength` option after initialization: // gettervar minLength = $( ".selector" ).autocomplete( "option", "minLength" ); // setter $( ".selector" ).autocomplete( "option", "minLength", 0 ); | 1 |
| position | Object | Identifies the position of the suggestion 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. For more details on the various options, see (#). **Code examples:** Initialize the autocomplete with the `position` option specified: $( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } }); Get or set the `position` option after initialization: // gettervar position = $( ".selector" ).autocomplete( "option", "position" ); // setter $( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } ); | { my: "left top", at: "left bottom", collision: "none" } |
| source | Array or String or Function( Object request, Function response( Object data ) ) | Defines the data to use, must be specified. Regardless of which variable you use, labels are always treated as text. If you want labels to be treated as HTML, you can use [Scott González' html extension](https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js). The demos focus on the different variations of the `source` option - you can find the one that matches your use case and see the relevant code. **Supports multiple types:** * **Array**: An array suitable for local data. Supports two formats: * String Array: `[ "Choice1", "Choice2" ]` * Object Array with `label` and `value` properties: `[ { label: "Choice1", value: "value1" }, ... ]` The label property is displayed in the suggestion menu. The value is inserted into the input element when the user selects an item. If only one property is specified, it will be used for both, e.g., if you only provide the `value` property, the value will also be used as the label. * **String**: When using a string, the Autocomplete plugin expects the string to point to a URL resource which can return JSON data. It can be on the same host or on a different host (must provide JSONP). The Autocomplete plugin does not filter the results, instead the server-side script is responsible for filtering the results and returning only the relevant ones. For example, if the `source` option is set to `"http://example.com"` and the user types `foo`, a GET request is made to `http://example.com?term=foo`. The data itself can be in the same format as the local data described above. * **Function**: The third variation, a callback function, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback function receives two arguments: * A `request` object, with a single property called `term`, which refers to the current text input value. For example, if the user types `"new yo"` in the city field, the Autocomplete term will equal `"new yo"`. * A `response` callback function, which is passed a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for the local data. Used to provide a custom source callback to handle errors during the request. You must call the `response` callback even if an error occurs. This ensures the widget always has the correct state. When filtering local data, you can use the built-in `$.ui.autocomplete.escapeRegex` function. It accepts a string and escapes all regex characters, making the result safe to pass to `new RegExp()`. **Code examples:** Initialize the autocomplete with the `source` option specified: $( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] }); Get or set the `source` option after initialization: // gettervar source = $( ".selector" ).autocomplete( "option", "source" ); // setter $( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] ); | none; must be specified |

| Method | Returns | Description |
| --- | --- | --- |
| close() | jQuery (plugin only) | Closes the Autocomplete menu. Useful in combination with the `search` method to close an open menu. * This method does not accept any arguments. **Code examples:** Invoke the close method: $( ".selector" ).autocomplete( "close" ); |
| destroy() | jQuery (plugin only) | Removes the autocomplete functionality completely. This will return the element back to its pre-init state. * This method does not accept any arguments. **Code examples:** Invoke the destroy method: $( ".selector" ).autocomplete( "destroy" ); |
| disable() | jQuery (plugin only) | Disables the autocomplete. * This method does not accept any arguments. **Code examples:** Invoke the disable method: $( ".selector" ).autocomplete( "disable" ); |
| enable() | jQuery (plugin only) | Enables the autocomplete. * This method does not accept any arguments. **Code examples:** Invoke the enable method: $( ".selector" ).autocomplete( "enable" ); |
| option( optionName ) | Object | Gets the value currently associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to get. **Code examples:** Invoke the method: var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" ); |
| option() | PlainObject | Gets an object containing key/value pairs representing the current autocomplete options hash. * This method does not accept any arguments. **Code examples:** Invoke the method: var options = $( ".selector" ).autocomplete( "option" ); |
| option( optionName, value ) | jQuery (plugin only) | Sets the value of the autocomplete option associated with the specified `optionName`. * **optionName** Type: String Description: The name of the option to set. * **value** Type: Object Description: The value to set for the option. **Code examples:** Invoke the method: $( ".selector" ).autocomplete( "option", "disabled", true ); |
| option( options ) | jQuery (plugin only) | Sets one or more options for the autocomplete. * **options** Type: Object Description: A map of option-value pairs to set. **Code examples:** Invoke the method: $( ".selector" ).autocomplete( "option", { disabled: true } ); |
| search(  ) | jQuery (plugin only) | Triggers the [`search`](#) event and, if the event is not canceled, calls the data source. Can be used, for example, to open the suggestion box when a select box button is clicked. When called without an argument, the current input value is used. Can be called with an empty string and `minLength: 0` to display all items. * **value** Type: String **Code examples:** Invoke the search method: $( ".selector" ).autocomplete( "search", "" ); |
| widget() | jQuery | Returns a `jQuery` object containing the menu element. Although menu items are constantly created and destroyed, the menu element itself is created at initialization and is constantly reused. * This method does not accept any arguments. **Code examples:** Invoke the widget method: $( ".selector" ).autocomplete( "widget" ); |

| Extension Point | Returns | Description |
| --- | --- | --- |
| The Autocomplete widget is created via the (#) and can be extended. When extending the widget, you can override or add to the behavior of the widget. The methods provided below serve as extension points and have the same API stability as the (#) listed above. For more information on widget extension, see (#). |
| _renderItem( ul, item ) | jQuery | Method that controls the creation of each option in the widget's menu. The method must create a new `<li>` element, append it to the menu, and return it. _Note: At this time the `<ul>` element created must contain an `<a>` element for compatibility with the (#) widget. See the example below._ * **ul** Type: jQuery Description: The `<ul>` element the newly created `<li>` element must be appended to. * **item** Type: Object * **label** Type: String Description: The string to display for the item. * **item** Type: String Description: The value to insert into the input when the item is selected. **Code examples:** Add the item's value as a data attribute on the `<li>`. _renderItem: function( ul, item ) { return $( "<li>" ) .attr( "data-value", item.value ) .append( $( "<a>" ).text( item.label ) ) .appendTo( ul );} |
| _renderMenu( ul, items ) | jQuery (plugin only) | This method is responsible for sizing the menu before it is displayed. The menu element is available via `this.menu.element`. * **ul** Type: jQuery Description: An empty `<ul>` element to use as the widget's menu. * **items** Type: Array Description: An array of items matching the user's input. Each item is an object with `label` and `value` properties. **Code examples:** Add a CSS class name to odd menu items. _renderMenu: function( ul, items ) { var that = this; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); $( ul ).find( "li:odd" ).addClass( "odd" );} |
| _resizeMenu() | jQuery (plugin only) | This method is responsible for sizing the menu before it is displayed. The menu element is available via `this.menu.element`. * This method does not accept any arguments. **Code examples:** Make the menu always display at 500 pixels wide. _resizeMenu: function() { this.menu.element.outerWidth( 500 );} |</div><div class="post-nav"><a href="/post/api-button.html">← Api Button</a><a href="/post/api-accordion.html">Api Accordion →</a></div></div>
<div class="sidebar"><div class="sidebar-widget"><h3>📂 Categories</h3><ul><li><a href="/category/18.html">⚡ JavaScript</a> (1589)</li><li><a href="/category/23.html">🐘 PHP</a> (872)</li><li><a href="/category/27.html">🐍 Python3</a> (810)</li><li><a href="/category/15.html">🌐 HTML</a> (691)</li><li><a href="/category/31.html">⚙️ C#</a> (650)</li><li><a href="/category/26.html">🐍 Python</a> (594)</li><li><a href="/category/28.html">☕ Java</a> (552)</li><li><a href="/category/72.html">⚙️ PyTorch</a> (534)</li><li><a href="/category/75.html">🐧 Linux</a> (472)</li><li><a href="/category/29.html">⚙️ C</a> (432)</li><li><a href="/category/20.html">📦 jQuery</a> (406)</li><li><a href="/category/16.html">🎨 CSS</a> (377)</li><li><a href="/category/64.html">📄 XML</a> (259)</li><li><a href="/category/59.html">📦 jQuery UI</a> (231)</li><li><a href="/category/60.html">🎯 Bootstrap</a> (220)</li><li><a href="/category/30.html">⚙️ C++</a> (215)</li><li><a href="/category/58.html">🅰️ Angular</a> (205)</li><li><a href="/category/19.html">🌐 HTML DOM</a> (201)</li><li><a href="/category/50.html">🔴 Redis</a> (188)</li><li><a href="/category/90.html">📖 Web Building</a> (142)</li><li><a href="/category/57.html">💚 Vue.js</a> (141)</li><li><a href="/category/43.html">📈 R</a> (131)</li><li><a href="/category/69.html">🐼 Pandas</a> (124)</li><li><a href="/category/24.html">🗄️ SQL</a> (105)</li><li><a href="/category/76.html">⚙️ Docker</a> (86)</li><li><a href="/category/36.html">⚙️ TypeScript</a> (73)</li><li><a href="/category/85.html">⚙️ Highcharts</a> (70)</li><li><a href="/category/95.html">📖 AI Agent</a> (70)</li><li><a href="/category/56.html">⚙️ React</a> (68)</li><li><a href="/category/35.html">📖 Node.js</a> (65)</li><li><a href="/category/94.html">⚙️ Machine Learning</a> (60)</li><li><a href="/category/77.html">📁 Git</a> (59)</li><li><a href="/category/32.html">🔵 Go</a> (58)</li><li><a href="/category/83.html">📈 Markdown</a> (58)</li><li><a href="/category/68.html">🔢 NumPy</a> (55)</li><li><a href="/category/66.html">🧪 Flask</a> (54)</li><li><a href="/category/41.html">⚙️ Scala</a> (53)</li><li><a href="/category/48.html">🗄️ SQLite</a> (52)</li><li><a href="/category/116.html">📖 JSTL</a> (52)</li><li><a href="/category/106.html">⚙️ VS Code</a> (51)</li><li><a href="/category/49.html">🍃 MongoDB</a> (49)</li><li><a href="/category/42.html">📈 Perl</a> (48)</li><li><a href="/category/34.html">📈 Ruby</a> (47)</li><li><a href="/category/70.html">📊 Matplotlib</a> (47)</li><li><a href="/category/1.html">⚙️ Uncategorized</a> (46)</li><li><a href="/category/37.html">🍎 Swift</a> (46)</li><li><a href="/category/51.html">🗄️ PostgreSQL</a> (46)</li><li><a href="/category/88.html">⚙️ Data Structures</a> (46)</li><li><a href="/category/100.html">📈 Playwright</a> (46)</li><li><a href="/category/54.html">📖 iOS</a> (45)</li><li><a href="/category/25.html">🗄️ MySQL</a> (44)</li><li><a href="/category/108.html">⚙️ LangChain</a> (43)</li><li><a href="/category/67.html">📖 FastAPI</a> (40)</li><li><a href="/category/112.html">⚙️ Ionic</a> (38)</li><li><a href="/category/87.html">📈 Design Patterns</a> (37)</li><li><a href="/category/114.html">⚙️ Eclipse</a> (37)</li><li><a href="/category/17.html">🎨 CSS3</a> (34)</li><li><a href="/category/40.html">🌙 Lua</a> (34)</li><li><a href="/category/127.html">⚙️ Codex</a> (34)</li><li><a href="/category/65.html">🎸 Django</a> (32)</li><li><a href="/category/102.html">⚙️ OpenCV</a> (32)</li><li><a href="/category/33.html">📈 Rust</a> (31)</li><li><a href="/category/117.html">📖 JSP</a> (31)</li><li><a href="/category/126.html">⚙️ Claude Code</a> (31)</li><li><a href="/category/101.html">📖 Pillow</a> (30)</li><li><a href="/category/130.html">⚙️ OpenCode</a> (28)</li><li><a href="/category/131.html">📖 AI Skills</a> (27)</li><li><a href="/category/55.html">📈 Flutter</a> (26)</li><li><a href="/category/80.html">📖 Maven</a> (26)</li><li><a href="/category/61.html">🎨 Tailwind CSS</a> (25)</li><li><a href="/category/73.html">🧠 TensorFlow</a> (25)</li><li><a href="/category/118.html">📈 Servlet</a> (24)</li><li><a href="/category/39.html">📈 Dart</a> (23)</li><li><a href="/category/46.html">📖 Assembly</a> (23)</li><li><a href="/category/52.html">⚙️ Memcached</a> (22)</li><li><a href="/category/63.html">✏️ SVG</a> (22)</li><li><a href="/category/98.html">⚙️ Electron</a> (22)</li><li><a href="/category/103.html">📖 NLP</a> (22)</li><li><a href="/category/82.html">🔍 Regex</a> (21)</li><li><a href="/category/53.html">📈 Android</a> (20)</li><li><a href="/category/38.html">🟣 Kotlin</a> (19)</li><li><a href="/category/44.html">📖 Julia</a> (19)</li><li><a href="/category/92.html">📖 SOAP</a> (17)</li><li><a href="/category/99.html">📖 Selenium</a> (17)</li><li><a href="/category/104.html">📈 PowerShell</a> (17)</li><li><a href="/category/62.html">💅 Sass</a> (16)</li><li><a href="/category/89.html">📖 HTTP</a> (16)</li><li><a href="/category/45.html">📖 Zig</a> (15)</li><li><a href="/category/113.html">📖 AI</a> (15)</li><li><a href="/category/21.html">🔄 AJAX</a> (14)</li><li><a href="/category/110.html">📈 Swagger</a> (14)</li><li><a href="/category/74.html">⚙️ Scikit-learn</a> (13)</li><li><a href="/category/84.html">⚙️ ECharts</a> (13)</li><li><a href="/category/86.html">⚙️ Chart.js</a> (13)</li><li><a href="/category/128.html">⚙️ Cursor</a> (13)</li><li><a href="/category/71.html">⚙️ SciPy</a> (12)</li><li><a href="/category/91.html">📈 RDF</a> (12)</li><li><a href="/category/96.html">📖 Ollama</a> (12)</li><li><a href="/category/97.html">📖 Next.js</a> (12)</li><li><a href="/category/129.html">📖 Plotly Dash</a> (12)</li><li><a href="/category/22.html">📋 JSON</a> (11)</li><li><a href="/category/109.html">📈 RESTful API</a> (11)</li><li><a href="/category/93.html">📖 WSDL</a> (9)</li><li><a href="/category/81.html">⚙️ CMake</a> (8)</li><li><a href="/category/115.html">📈 Firebug</a> (7)</li><li><a href="/category/78.html">📖 Nginx</a> (6)</li><li><a href="/category/79.html">☸️ Kubernetes</a> (6)</li><li><a href="/category/107.html">📈 Jupyter</a> (6)</li><li><a href="/category/105.html">📖 LaTeX</a> (4)</li><li><a href="/category/111.html">📖 UniApp</a> (4)</li><li><a href="/category/47.html">🗄️ SQL Server</a> (1)</li></ul></div></div>
</div>
</div>
<footer>
<div class="container">
YouTip © 2024-2026 | <a href="/">Home</a> | Learn Technology, Build Dreams!
All content is for educational and learning purposes only.
</div>
</footer>

<script>
 // Placeholder for Google Analytics
</script>

</body>
</html>