{"id":6056,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=6056"},"modified":"2024-01-22T14:43:29","modified_gmt":"2024-01-22T09:43:29","slug":"javascript-autocomplete-dropdown","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/","title":{"rendered":"19+ JavaScript Autocomplete Dropdown Sample & Tutorial"},"content":{"rendered":"

This Vanilla JavaScript code snippet helps you to create autocomplete suggestion dropdown. It uses JavaScript regular expression pattern to match the entered value on keyup event. After matching, it appends the result to the suggestions list and highlights both the first letter and all matches in the suggested keywords.<\/p>\n

You just need to update your keywords in the array according to your select menu. Then this plugin will search and load the relevant result in the suggestions list. Besides this, you can customize\/style the select dropdown with additional CSS according to your needs.<\/p>\n

How to Create JavaScript Autocomplete Dropdown<\/h2>\n

1. First of all, create a div element with the class name “search-container” and place an input element for the search box. Likewise, create a div element just after the input and define its class name “suggestions”. Place an unordered list (ul element) inside the suggestions dropdown<\/a>, it will contain the search items. So, the complete HTML structure for the autocomplete dropdown is as follows:<\/p>\n

<div class=\"search-container\">\n\t<input type=\"text\" name=\"fruit\" id=\"fruit\" placeholder=\"Search fruit 🍎\">\n\t<div class=\"suggestions\">\n\t\t<ul><\/ul>\n\t<\/div>\n<\/div>\n<\/pre>\n
2. After creating the HTML, we need to style the input box and suggestions dropdown list. So, add the following CSS styles to your project. You can also use your own CSS styles in order to customize the autocomplete dropdown according to your existing website template.<\/p>\n
input {\n  border: 0 none;\n}\n\n.search-container {\n  width: 400px;\n  position: relative;\n  margin: 15px auto;\n}\n.search-container input,\n.search-container .suggestions {\n  width: 100%;\n  background: #fff;\n  text-align: left;\n}\n.search-container input {\n  background: rgba(255, 255, 255, 0.2);\n  height: 60px;\n  padding: 0 10px;\n}\n.search-container .suggestions {\n  position: absolute;\n  top: 60px;\n}\n\nul {\n  display: none;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n  max-height: 200px;\n  overflow-y: auto;\n}\nul.has-suggestions {\n  display: block;\n}\nul li {\n  padding: 10px;\n  cursor: pointer;\n  background: rgba(255, 255, 255, 0.2);\n}\nul li:hover {\n  background-color: #e65c00;\n}\n\ninput {\n  border-bottom: 2px solid #e65c00;\n}\n<\/pre>\n
3. Finally, add the following autocomplete dropdown function between the <script> before closing the body tag. In the below function, you just need to update fruit array values. You can read more about JavaScript arrays<\/a> that may help in regards to defining your own values.<\/p>\n
const input = document.querySelector('#fruit');\nconst suggestions = document.querySelector('.suggestions ul');\n\nconst fruit = [ 'Apple', 'Apricot', 'Avocado 🥑', 'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry', 'Boysenberry', 'Currant', 'Cherry', 'Coconut', 'Cranberry', 'Cucumber', 'Custard apple', 'Damson', 'Date', 'Dragonfruit', 'Durian', 'Elderberry', 'Feijoa', 'Fig', 'Gooseberry', 'Grape', 'Raisin', 'Grapefruit', 'Guava', 'Honeyberry', 'Huckleberry', 'Jabuticaba', 'Jackfruit', 'Jambul', 'Juniper berry', 'Kiwifruit', 'Kumquat', 'Lemon', 'Lime', 'Loquat', 'Longan', 'Lychee', 'Mango', 'Mangosteen', 'Marionberry', 'Melon', 'Cantaloupe', 'Honeydew', 'Watermelon', 'Miracle fruit', 'Mulberry', 'Nectarine', 'Nance', 'Olive', 'Orange', 'Clementine', 'Mandarine', 'Tangerine', 'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Plantain', 'Plum', 'Pineapple', 'Pomegranate', 'Pomelo', 'Quince', 'Raspberry', 'Salmonberry', 'Rambutan', 'Redcurrant', 'Salak', 'Satsuma', 'Soursop', 'Star fruit', 'Strawberry', 'Tamarillo', 'Tamarind', 'Yuzu'];\n\nfunction search(str) {\n\tlet results = [];\n\tconst val = str.toLowerCase();\n\n\tfor (i = 0; i < fruit.length; i++) {\n\t\tif (fruit[i].toLowerCase().indexOf(val) > -1) {\n\t\t\tresults.push(fruit[i]);\n\t\t}\n\t}\n\n\treturn results;\n}\n\nfunction searchHandler(e) {\n\tconst inputVal = e.currentTarget.value;\n\tlet results = [];\n\tif (inputVal.length > 0) {\n\t\tresults = search(inputVal);\n\t}\n\tshowSuggestions(results, inputVal);\n}\n\nfunction showSuggestions(results, inputVal) {\n    \n    suggestions.innerHTML = '';\n\n\tif (results.length > 0) {\n\t\tfor (i = 0; i < results.length; i++) {\n\t\t\tlet item = results[i];\n\t\t\t\/\/ Highlights only the first match\n\t\t\t\/\/ TODO: highlight all matches\n\t\t\tconst match = item.match(new RegExp(inputVal, 'i'));\n\t\t\titem = item.replace(match[0], `<strong>${match[0]}<\/strong>`);\n\t\t\tsuggestions.innerHTML += `<li>${item}<\/li>`;\n\t\t}\n\t\tsuggestions.classList.add('has-suggestions');\n\t} else {\n\t\tresults = [];\n\t\tsuggestions.innerHTML = '';\n\t\tsuggestions.classList.remove('has-suggestions');\n\t}\n}\n\nfunction useSuggestion(e) {\n\tinput.value = e.target.innerText;\n\tinput.focus();\n\tsuggestions.innerHTML = '';\n\tsuggestions.classList.remove('has-suggestions');\n}\n\ninput.addEventListener('keyup', searchHandler);\nsuggestions.addEventListener('click', useSuggestion);\n<\/pre>\n
That’s all! hopefully, you have successfully integrated this code snippet into your project to create autocomplete dropdown. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This Vanilla JavaScript code snippet helps you to create autocomplete suggestion dropdown. It uses JavaScript regular expression pattern to match…<\/p>\n","protected":false},"author":1,"featured_media":6059,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97,116],"tags":[219],"class_list":["post-6056","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input","category-vanilla-javascript","tag-select-dropdown"],"acf":[],"yoast_head":"\n19+ JavaScript Autocomplete Dropdown Sample & Tutorial — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a lightweight Vanilla JavaScript autocomplete dropdown code snippet. It will help you to create auto suggestion select dropdown.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"19+ JavaScript Autocomplete Dropdown Sample & Tutorial — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a lightweight Vanilla JavaScript autocomplete dropdown code snippet. It will help you to create auto suggestion select dropdown.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:43:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1263\" \/>\n\t<meta property=\"og:image:height\" content=\"947\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\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:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"19+ JavaScript Autocomplete Dropdown Sample & Tutorial\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\"},\"wordCount\":292,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png\",\"keywords\":[\"Select Dropdown\"],\"articleSection\":[\"Text & Input\",\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\",\"name\":\"19+ JavaScript Autocomplete Dropdown Sample & Tutorial — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:43:29+00:00\",\"description\":\"Here is a lightweight Vanilla JavaScript autocomplete dropdown code snippet. It will help you to create auto suggestion select dropdown.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png\",\"width\":1263,\"height\":947,\"caption\":\"JavaScript Autocomplete Dropdown\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"19+ JavaScript Autocomplete Dropdown Sample & Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"19+ JavaScript Autocomplete Dropdown Sample & Tutorial — CodeHim","description":"Here is a lightweight Vanilla JavaScript autocomplete dropdown code snippet. It will help you to create auto suggestion select dropdown.","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:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/","og_locale":"en_US","og_type":"article","og_title":"19+ JavaScript Autocomplete Dropdown Sample & Tutorial — CodeHim","og_description":"Here is a lightweight Vanilla JavaScript autocomplete dropdown code snippet. It will help you to create auto suggestion select dropdown.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:43:29+00:00","og_image":[{"width":1263,"height":947,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"19+ JavaScript Autocomplete Dropdown Sample & Tutorial","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:29+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/"},"wordCount":292,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png","keywords":["Select Dropdown"],"articleSection":["Text & Input","Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/","name":"19+ JavaScript Autocomplete Dropdown Sample & Tutorial — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:43:29+00:00","description":"Here is a lightweight Vanilla JavaScript autocomplete dropdown code snippet. It will help you to create auto suggestion select dropdown.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/02\/javascript-autocomplete-dropdown.png","width":1263,"height":947,"caption":"JavaScript Autocomplete Dropdown"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-autocomplete-dropdown\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"19+ JavaScript Autocomplete Dropdown Sample & Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":24760,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6056"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6056\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/6059"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}