{"id":6663,"date":"2015-09-07T12:15:04","date_gmt":"2015-09-07T09:15:04","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6663"},"modified":"2017-12-21T16:40:32","modified_gmt":"2017-12-21T14:40:32","slug":"jquery-ui-autocomplete-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/","title":{"rendered":"jQuery UI Autocomplete Example"},"content":{"rendered":"

In this example, we’re going through a very useful widget of jQuery, autocomplete()<\/code>.<\/p>\n

Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Any field that can receive input can be converted into an Autocomplete, namely, <input><\/code> elements, <textarea><\/code> elements, and elements with the contenteditable attribute.<\/p>\n

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.<\/p>\n

This can be used to choose previously selected values, such as entering tags for articles or entering email addresses from an address book. Autocomplete can also be used to populate associated information, such as entering a city name and getting the zip code.
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Document Setup<\/h2>\n

In order to have a good start, after creating a new HTML document, add the following basic syntax and jQuery links into it:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <title>jQuery UI Autocomplete Example<\/title>\r\n\r\n<!-- LINKS SECTION  -->\r\n  <link href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8\/themes\/base\/jquery-ui.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n  <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n  <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.8\/jquery-ui.min.js\"><\/script>\r\n  <link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n\r\n<\/head>\r\n<body>\r\n<!-- HTML SECTION  -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Now that we’ve included the most important links like the jquery-ui and jquery javascript files, we’re ready to create a basic autocomplete field.<\/p>\n
2. Basic Autocomplete Input Field<\/h2>\n
So basically, what we’re doing here is creating a variable inside a function, which will hold the actual suggested (autocomplete) words, and then use that source to populate the filtered list as we type in the input field. The schema below shows how we’re structuring our code to do this:
\n
\"Our<\/a>
Our Code Structure<\/figcaption><\/figure>
\nThat’s it. Let’s go ahead and do it:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\n<div class=\"ui-widget\">    <!-- this class could be anything you want -->\r\n\r\n  <label for=\"people\">Tags: <\/label>\r\n\r\n  <input class=\"people\"> \r\n\r\n<\/div>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n\r\n<script>\r\n\r\n  $(function() {\r\n\r\n    var names = [\r\n\r\n      \"Alban\",\r\n      \"Andy\",\r\n      \"Ajax\",\r\n      \"Bob\",\r\n      \"Cody\",\r\n      \"Chloe\",\r\n      \"Camela\",\r\n      \"Charlotte\",\r\n      \"Ciara\",\r\n      \"Ella\",\r\n      \"Fabio\",\r\n      \"George\",\r\n      \"Helen\",\r\n      \"Juliet\",\r\n      \"James\",\r\n      \"Lory\",\r\n      \"Patricia\",\r\n      \"Peter\",\r\n      \"Roxanna\",\r\n      \"Randi\",\r\n      \"Selena\",\r\n      \"Sara\"\r\n    ];\r\n\r\n    $(\".people\").autocomplete({\r\n    \/*refer to the same id that input has*\/\r\n      source: names\r\n    \/*set the source name that you gave your array variable*\/\r\n    });\r\n  });\r\n  <\/script>\r\n<\/pre>\n
Trying this out in the browser would result in getting constant suggestions as we type:<\/p>\n
\"Basic<\/a><\/p>\n
3. Autocomplete Options<\/h2>\n
Autocomplete has some interesting options that will be helpful when using the autocomplete method. Below, we’ll have a look at some of them.<\/p>\n
3.1 AppendTo<\/h3>\n
Add a new element in HTML, that will be the element where filtered words will be added.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div class=\"ui-widget\">   \r\n  <label for=\"people\">Tags: <\/label>\r\n  <input class=\"people\">\r\n  <p class=\"para\"><\/p> \r\n  <\/div>\r\n<\/pre>\n
Now initialize the autocomplete with the appendTo<\/code> option specified:<\/p>\n
    \r\n$(\".people\").autocomplete({\r\n    appendTo: \".para\"\r\n});\r\n<\/pre>\n
Get or set the appendTo<\/code> option, after initialization:<\/p>\n
    \r\n\/\/ Getter\r\nvar appendTo = $( \".people\" ).autocomplete( \"option\", \"appendTo\" );\r\n\r\n\/\/ Setter\r\n$( \".people\" ).autocomplete( \"option\", \"appendTo\", \".para\" );\r\n<\/pre>\n
The result would show names getting appended to the paragraph as soon as they are searched by a letter:
\n
http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/08\/autocomplete-3.mp4<\/a><\/video><\/div><\/p>\n
3.2 Delay<\/h3>\n
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 being less responsive.<\/p>\n
Initialize the autocomplete with the delay<\/code> option specified:<\/p>\n
\r\n$( \".selector\" ).autocomplete({\r\n  delay: 500\r\n});\r\n<\/pre>\n
Get or set the delay<\/code> option, after initialization:<\/p>\n
\r\n\/\/ Getter\r\nvar delay = $( \".selector\" ).autocomplete( \"option\", \"delay\" );\r\n \r\n\/\/ Setter\r\n$( \".selector\" ).autocomplete( \"option\", \"delay\", 500 );\r\n<\/pre>\n
\"Delay<\/a>
Delay Option of Autocomplete<\/figcaption><\/figure>\n
3.3 Disabled<\/h3>\n
Disables the autocomplete if set to true<\/code>.<\/p>\n
Initialize the autocomplete with the disabled<\/code> option specified:<\/p>\n
\r\n$( \".selector\" ).autocomplete({\r\n  disabled: true\r\n});\r\n<\/pre>\n
Get or set the disabled<\/code> option, after initialization:<\/p>\n
\r\n\/\/ Getter\r\nvar disabled = $( \".selector\" ).autocomplete( \"option\", \"disabled\" );\r\n \r\n\/\/ Setter\r\n$( \".selector\" ).autocomplete( \"option\", \"disabled\", true );\r\n<\/pre>\n
\"Disabled<\/a>
Disabled Autocomplete – Nothing Happens<\/figcaption><\/figure>\n
3.4 minLength<\/h3>\n
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 used when a single character search could match a few thousand items.<\/p>\n
Initialize the autocomplete with the minLength<\/code> option specified:<\/p>\n
\r\n$( \".selector\" ).autocomplete({\r\n  minLength: 2\r\n});\r\n<\/pre>\n
Get or set the minLength<\/code> option, after initialization:<\/p>\n
\r\n\/\/ Getter\r\nvar minLength = $( \".selector\" ).autocomplete( \"option\", \"minLength\" );\r\n \r\n\/\/ Setter\r\n$( \".selector\" ).autocomplete( \"option\", \"minLength\", 2 );\r\n<\/pre>\n
As a result, autocompletion will only start after typing the second character in the input field:
\n
\"Autocomplete<\/a>
Autocomplete minLength Option<\/figcaption><\/figure><\/p>\n
3.5 Source<\/h3>\n
Defines the data to use, must be specified. It may be an Array, a String or a Function.<\/p>\n
Initialize the autocomplete with the source<\/code> option specified:<\/p>\n
\r\n$( \".selector\" ).autocomplete({\r\n  source: [ \"c++\", \"java\", \"php\", \"coldfusion\", \"javascript\", \"asp\", \"ruby\" ]\r\n});\r\n<\/pre>\n
Get or set the source<\/code> option, after initialization:<\/p>\n
\r\n\/\/ Getter\r\nvar source = $( \".selector\" ).autocomplete( \"option\", \"source\" );\r\n \r\n\/\/ Setter\r\n$( \".selector\" ).autocomplete( \"option\", \"source\", [ \"c++\", \"java\", \"php\", \"coldfusion\", \"javascript\", \"asp\", \"ruby\" ] );\r\n<\/pre>\n
Notice that we already used the source<\/code> option as the most basic option, but we used an array of names apart, instead of inline declaration.<\/p>\n
4. Conclusion<\/h2>\n
The autocomplete widget is a useful tool to consider when dealing with input fields, it gives the user a suggestion (or maybe a hint) on what the input can be filled with. As we saw here, it is highly customizable and helps you optimize it. For more information on the autocomplete<\/code> widget, feel free to use the official jQuery UI wesbite and specifically this topic<\/a>.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery UI Autocomplete<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we’re going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-6663","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery UI Autocomplete Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we're going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery UI Autocomplete Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we're going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-07T09:15:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:40:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery UI Autocomplete Example\",\"datePublished\":\"2015-09-07T09:15:04+00:00\",\"dateModified\":\"2017-12-21T14:40:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\"},\"wordCount\":700,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\",\"name\":\"jQuery UI Autocomplete Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-07T09:15:04+00:00\",\"dateModified\":\"2017-12-21T14:40:32+00:00\",\"description\":\"In this example, we're going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery UI Autocomplete Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery UI Autocomplete Example - Web Code Geeks - 2026","description":"In this example, we're going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery UI Autocomplete Example - Web Code Geeks - 2026","og_description":"In this example, we're going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-07T09:15:04+00:00","article_modified_time":"2017-12-21T14:40:32+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery UI Autocomplete Example","datePublished":"2015-09-07T09:15:04+00:00","dateModified":"2017-12-21T14:40:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/"},"wordCount":700,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/","name":"jQuery UI Autocomplete Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-07T09:15:04+00:00","dateModified":"2017-12-21T14:40:32+00:00","description":"In this example, we're going through a very useful widget of jQuery, autocomplete(). Autocomplete enables users to quickly find and select from a","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-autocomplete-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery UI Autocomplete Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6663","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6663"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6663\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}