{"id":5647,"date":"2018-03-14T02:28:10","date_gmt":"2018-03-14T02:28:10","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=5647"},"modified":"2023-10-01T12:23:40","modified_gmt":"2023-10-01T12:23:40","slug":"materialize-autocomplete-2-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/","title":{"rendered":"The Autocomplete component in Materialize"},"content":{"rendered":"

The Materialize has a built-in component for creating the autocomplete box. So, as a user types in a letter in a textbox, the recommendations based on entered letters display with a style.<\/p>\n

The list of words can be provided in the jQuery code by using an array or by JavaScript. The suggestions can also be populated dynamically.<\/p>\n

A demo of auto-complete<\/strong><\/h3>\n

The autocomplete feature requires using an input typ=text<\/em> field and using the autcomplete<\/strong> class. A little jQuery\/JavaScript is required for initializing and providing the suggestions. See an example by clicking the link or image below and enter any of the characters in these words: JavaScript, Java, jQuery, Python etc.<\/p>\n

\"materialize<\/p>\n

Online demo<\/strong><\/a><\/h6>\n

The markup:<\/strong><\/p>\n

<div class=\"container\">\r\n\r\n\u00a0<div class=\"row\">\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"col s12\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"row\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-field col s12\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <i class=\"material-icons prefix\">textsms<\/i>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" id=\"demo-auto\" class=\"autocomplete\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label for=\"demo-auto\">Enter a Letter<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/div><\/pre>\n
The jQuery code:<\/strong><\/p>\n
<script>\r\n\r\n\u00a0 $(document).ready(function(){\r\n\r\n\u00a0\u00a0\u00a0 $('input.autocomplete').autocomplete({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 data: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"jQuery\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"JavaScript\": 'https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/12\/favicon-32x32.png',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"CSS\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"HTML\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Bootstrap\": 'https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/12\/favicon-32x32.png',\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Java\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Python\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0 });\r\n\r\n<\/script><\/pre>\n
In the data option, you may provide the suggestions for autocomplete with a name to display along with its icon. The icon is optional, for example:<\/p>\n
“JavaScript”: ‘https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/12\/favicon-32×32.png’<\/p><\/blockquote>\n
Using the limit option example<\/strong><\/h3>\n
If you have a long list of suggestions that may go beyond the available desired space, you may limit the number of suggestions to appear in the auto-complete\u00a0box.<\/p>\n
For that, use the limit<\/strong> option in the jQuery code with required number. For example:<\/p>\n
limit: 3<\/p><\/blockquote>\n
To demonstrate that, I have created the array of auto complete values as shown in the code below. If you enter \u2018a\u2019, four suggestions should be displayed. However, as limit option is set as 3, so it will display only 3 suggestions. Have a look:<\/p>\n
\"materialize<\/p>\n
The code:<\/strong><\/p>\n
<div class=\"container\">\r\n\r\n\u00a0<div class=\"row\">\r\n\r\n\u00a0\u00a0\u00a0 <div class=\"col s12\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"row\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"input-field col s12\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <i class=\"material-icons prefix\">textsms<\/i>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" id=\"demo-auto\" class=\"autocomplete\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label for=\"demo-auto\">Enter a Letter<\/label>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0 <\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n\r\n\u00a0 $(document).ready(function(){\r\n\r\n\u00a0\u00a0\u00a0 $('input.autocomplete').autocomplete({\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 data: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"jQuery\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"JavaScript\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"CSS\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Angular JS\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Node\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Git\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"HTML\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Bootstrap\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Java\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"Python\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"PHP\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \".Net\": null,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\r\n\u00a0 \u00a0\u00a0\u00a0\u00a0limit: 3\r\n\r\n\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0 });\r\n\r\n<\/script><\/pre>\n
The autocomplete Materialize component has more options that you may learn here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Materialize has a built-in component for creating the auto complete textbox. So, as a user types in a letter in a textbox, the recommendations based on entered letters display with a style.<\/p>\n","protected":false},"author":1,"featured_media":5648,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[82],"tags":[],"yoast_head":"\nMaterialize Autocomplete with 2 Demos<\/title>\n<meta name=\"description\" content=\"The Materialize has a built-in component for creating the auto complete textbox.As user types in a letter in a textbox, the recommendations..\" \/>\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.jquery-az.com\/materialize-autocomplete-2-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Materialize Autocomplete with 2 Demos\" \/>\n<meta property=\"og:description\" content=\"The Materialize has a built-in component for creating the auto complete textbox.As user types in a letter in a textbox, the recommendations..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-14T02:28:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-01T12:23:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/03\/10-1-materialize-auto-complete.png\" \/>\n\t<meta property=\"og:image:width\" content=\"292\" \/>\n\t<meta property=\"og:image:height\" content=\"223\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/\",\"name\":\"Materialize Autocomplete with 2 Demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2018-03-14T02:28:10+00:00\",\"dateModified\":\"2023-10-01T12:23:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"The Materialize has a built-in component for creating the auto complete textbox.As user types in a letter in a textbox, the recommendations..\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Autocomplete component in Materialize\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Materialize Autocomplete with 2 Demos","description":"The Materialize has a built-in component for creating the auto complete textbox.As user types in a letter in a textbox, the recommendations..","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.jquery-az.com\/materialize-autocomplete-2-demos\/","og_locale":"en_US","og_type":"article","og_title":"Materialize Autocomplete with 2 Demos","og_description":"The Materialize has a built-in component for creating the auto complete textbox.As user types in a letter in a textbox, the recommendations..","og_url":"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/","article_published_time":"2018-03-14T02:28:10+00:00","article_modified_time":"2023-10-01T12:23:40+00:00","og_image":[{"width":292,"height":223,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2018\/03\/10-1-materialize-auto-complete.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/","url":"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/","name":"Materialize Autocomplete with 2 Demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2018-03-14T02:28:10+00:00","dateModified":"2023-10-01T12:23:40+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"The Materialize has a built-in component for creating the auto complete textbox.As user types in a letter in a textbox, the recommendations..","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/materialize-autocomplete-2-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"The Autocomplete component in Materialize"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5647"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=5647"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5647\/revisions"}],"predecessor-version":[{"id":10028,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/5647\/revisions\/10028"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/5648"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=5647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=5647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=5647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}