{"id":3140,"date":"2020-08-18T04:24:50","date_gmt":"2020-08-18T04:24:50","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3140"},"modified":"2021-01-20T05:00:29","modified_gmt":"2021-01-20T05:00:29","slug":"create-autocomplete-input-in-html","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/","title":{"rendered":"Create Autocomplete Input In HTML"},"content":{"rendered":"

Introduction<\/h2>\n

The autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. It allows the browser to predict the worth. When a user starts to type into a form field, the browser<\/a> displays options to fill within the field, carrying earlier typed values.<\/p>\n

How to Use:<\/h3>\n

Create an HTML file in local machine and add this code in the created file:<\/p>\n


\n<!doctype html>
\n<html lang=\"en\">
\n <head>
\n <!-- Required meta tags -->
\n <meta charset=\"utf-8\">
\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">
\n <!-- Bootstrap CSS --><\/p>\n

<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\"\/>
\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.css\"\/>
\n <title>test<\/title>
\n <\/head>
\n <body><\/p>\n

\t <div class=\"col autocomplete-input\">
\n\t <div class=\"ui-widget d-flex\">
\n\t\t <label for=\"tags\">Type to search:<\/label>
\n\t\t <div class=\"input-group custom-input\">
\n\t\t\t<input type=\"text\" class=\"form-control\" id=\"tags\" value=\"\">\t\t\t\t\t\t\t <\/div>
\n\t <\/div>
\n\t<\/div><\/p>\n

<script src=\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"><\/script>
\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.12.1\/jquery-ui.min.js\"><\/script>
\n <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\"><\/script>
\n<\/body>
\n<\/html><\/p>\n

<\/code>
\nUse the CDN for bootstrap 4 CSS, jquery and jqueryUI. jqueryUI CSS or jquery CDN is mainly used to create this input in HTML. This is your basic input field output without any autocomplete functionality.<\/p>\n

Output:<\/strong><\/p>\n

\"static\"\/<\/p>\n

This is a simple layout you have created in the HTML file with Bootstrap 4.
\nYou can add the below code for required jquery functionality of autocomplete input types. Add this code below to jquery links in the bottom of page :<\/p>\n


\n<script>
\n\t$(function () {
\n\t\tvar list = [
\n\t\t\t'1',
\n\t\t\t'2',
\n\t\t\t'3',
\n\t\t\t'4',
\n\t\t\t'5',
\n\t\t];
\n\t $(\"#test\").autocomplete({
\n\t\t\tsource: list,
\n\t\t\tminLength: 0,
\n\t\t}).focus(function(){
\n\t\t\t$(this).autocomplete(\"search\", \"\");
\n\t\t});
\n\t});
\njQuery.ui.autocomplete.prototype._resizeMenu = function () {
\n var ul = this.menu.element;
\n ul.outerWidth(this.element.outerWidth());<\/em>
\n }
\n<\/script>
\n<\/code><\/p>\n

Note :
\nHighlighted code in bold: This code is for showing autocomplete list on focus.
\nHighlighted code in italic: This code for adjusting autocomplete list width according to the input box.<\/em><\/strong><\/p>\n

Output:<\/strong><\/p>\n

\"final\"\/<\/p>\n

This is the basic use of jQuery UI input in HTML code with focus.<\/p>\n

If you have skills in PHP programming and you want to enhance your career in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP certification exams<\/a> are offered by StudySection along with other programming certification exams. <\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction The autocomplete attribute specifies whether a form or an input field should have autocomplete on or off. It allows<\/p>\n","protected":false},"author":1,"featured_media":3142,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[521,201,520],"acf":[],"yoast_head":"\nStudySection Blog - Create Autocomplete Input In HTML<\/title>\n<meta name=\"description\" content=\"The autocomplete attribute specifies whether a form should have autocomplete on or off. It allows the browser to predict the worth.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - Create Autocomplete Input In HTML\" \/>\n<meta property=\"og:description\" content=\"The autocomplete attribute specifies whether a form should have autocomplete on or off. It allows the browser to predict the worth.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-18T04:24:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-20T05:00:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/08\/autocomplete.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\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\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Create Autocomplete Input In HTML\",\"datePublished\":\"2020-08-18T04:24:50+00:00\",\"dateModified\":\"2021-01-20T05:00:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\"},\"wordCount\":240,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Autocomplete\",\"html\",\"Input\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\",\"url\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\",\"name\":\"StudySection Blog - Create Autocomplete Input In HTML\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2020-08-18T04:24:50+00:00\",\"dateModified\":\"2021-01-20T05:00:29+00:00\",\"description\":\"The autocomplete attribute specifies whether a form should have autocomplete on or off. It allows the browser to predict the worth.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Autocomplete Input In HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - Create Autocomplete Input In HTML","description":"The autocomplete attribute specifies whether a form should have autocomplete on or off. It allows the browser to predict the worth.","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:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - Create Autocomplete Input In HTML","og_description":"The autocomplete attribute specifies whether a form should have autocomplete on or off. It allows the browser to predict the worth.","og_url":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2020-08-18T04:24:50+00:00","article_modified_time":"2021-01-20T05:00:29+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/08\/autocomplete.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Create Autocomplete Input In HTML","datePublished":"2020-08-18T04:24:50+00:00","dateModified":"2021-01-20T05:00:29+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/"},"wordCount":240,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Autocomplete","html","Input"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/","url":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/","name":"StudySection Blog - Create Autocomplete Input In HTML","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2020-08-18T04:24:50+00:00","dateModified":"2021-01-20T05:00:29+00:00","description":"The autocomplete attribute specifies whether a form should have autocomplete on or off. It allows the browser to predict the worth.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/create-autocomplete-input-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Autocomplete Input In HTML"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":208,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3140"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=3140"}],"version-history":[{"count":6,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3140\/revisions"}],"predecessor-version":[{"id":3862,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3140\/revisions\/3862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/3142"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=3140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=3140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=3140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}