--- title: AutoComplete with JS | daily.dev description: Let’s create an autocomplete so that clicking on an input displays a suggestion list. We have a div and inside we have a label, an input and a ul. This input... canonical: https://daily.dev/posts/autocomplete-with-js-lguzlzlzs twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: AutoComplete with JS | daily.dev og:description: Let’s create an autocomplete so that clicking on an input displays a suggestion list. We have a div and inside we have a label, an input and a ul. This input... og:url: https://daily.dev/posts/autocomplete-with-js-lguzlzlzs og:image: https://api.daily.dev/og/posts/LGuZlZLzs.png og:image:alt: AutoComplete with JS og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # AutoComplete with JS **[DEV](https://daily.dev/sources/devto)** · 2 min read · 14 upvotes · 1 comments ## Summary Let’s create an autocomplete so that clicking on an input displays a suggestion list. We have a div and inside we have a label, an input and a ul. This input will be where we will type the information and when the information matches the list we have it will be displayed in ul. See below for the complete working project. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@mihamedfanah** · 0 upvotes > Nice Article --- Tags: [#javascript](https://daily.dev/tags/javascript) [View this post on daily.dev](https://daily.dev/posts/autocomplete-with-js-lguzlzlzs) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"AutoComplete with JS","url":"https://daily.dev/posts/autocomplete-with-js-lguzlzlzs","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/autocomplete-with-js-lguzlzlzs"},"datePublished":"2021-11-20T11:16:14.956Z","dateModified":"2021-11-20T11:16:14.956Z","description":"Let’s create an autocomplete so that clicking on an input displays a suggestion list. We have a div and inside we have a label, an input and a ul. This input...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6ee11d6241a9faffd3c30c41bb7d1f92","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/6ee11d6241a9faffd3c30c41bb7d1f92","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/autocomplete-with-js-lguzlzlzs","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":14},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"javascript","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"AutoComplete with JS"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/autocomplete-with-js-lguzlzlzs","comment":[{"@type":"Comment","text":"Nice Article","datePublished":"2021-11-20T14:42:07.118Z","url":"https://daily.dev/posts/LGuZlZLzs#c-VxxHDRw2l","author":{"@type":"Person","name":"Mohamed mohamoud","url":"https://daily.dev/mihamedfanah","image":"https://avatars.githubusercontent.com/u/50938113?v=4"}}]} ```