{"id":12,"date":"2023-08-25T18:58:58","date_gmt":"2023-08-25T18:58:58","guid":{"rendered":"\/\/jqueryui.com\/?page_id=12"},"modified":"2024-04-26T16:40:16","modified_gmt":"2024-04-26T16:40:16","slug":"autocomplete","status":"publish","type":"page","link":"https:\/\/jqueryui.com\/autocomplete\/","title":{"rendered":"Autocomplete"},"content":{"rendered":"<p class=\"desc\">Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.<\/p>\n\n<div class=\"demo-list\"><h2>Examples<\/h2><ul><li class=\"active\"><a href=\"\/resources\/demos\/autocomplete\/default.html\">Default functionality<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/folding.html\">Accent folding<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/categories.html\">Categories<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/combobox.html\">Combobox<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/custom-data.html\">Custom data and display<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/multiple.html\">Multiple values<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/multiple-remote.html\">Multiple, remote<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/remote.html\">Remote datasource<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/remote-jsonp.html\">Remote JSONP datasource<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/remote-with-cache.html\">Remote with caching<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/maxheight.html\">Scrollable results<\/a><\/li><li><a href=\"\/resources\/demos\/autocomplete\/xml.html\">XML data parsed once<\/a><\/li><\/ul><\/div><iframe src=\"\/resources\/demos\/autocomplete\/default.html\" class=\"demo-frame\"><\/iframe><div class=\"demo-description\">\n<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give \"ja\" (for Java or JavaScript) a try.<\/p>\n<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.<\/p>\n<\/div><div class=\"view-source\"><a tabindex=\"0\"><i class=\"icon-eye-open\"><\/i> view source<\/a><div><div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery UI Autocomplete - Default functionality<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/themes\/base\/jquery-ui.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"\/resources\/demos\/style.css\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.7.1.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/ui\/1.14.2\/jquery-ui.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> availableTags = [<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"ActionScript\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"AppleScript\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Asp\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"BASIC\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"C\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"C++\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Clojure\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"COBOL\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"ColdFusion\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Erlang\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Fortran\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Groovy\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Haskell\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Java\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"JavaScript\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Lisp\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Perl\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"PHP\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Python\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Ruby\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Scala\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"Scheme\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    ];<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#tags\"<\/span> ).autocomplete({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">source<\/span>: availableTags<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ui-widget\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"tags\"<\/span>&gt;<\/span>Tags: <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"tags\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n<\/div><\/div>\n\n<p>Want to learn more about the autocomplete widget? Check out the\n<a href=\"https:\/\/api.jqueryui.com\/autocomplete\/\">API documentation<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. ExamplesDefault functionalityAccent foldingCategoriesComboboxCustom data and displayMultiple valuesMultiple, remoteRemote datasourceRemote JSONP datasourceRemote with cachingScrollable resultsXML data parsed once The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming &hellip; <a href=\"https:\/\/jqueryui.com\/autocomplete\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-12","page","type-page","status-publish","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":2,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/pages\/12\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jqueryui.com\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}