{"id":23093190,"url":"https://github.com/crispengari/auto-complet-js","last_synced_at":"2026-07-15T12:39:02.394Z","repository":{"id":141093756,"uuid":"340237521","full_name":"CrispenGari/auto-complet-js","owner":"CrispenGari","description":"This is a simple JavaScript web application that help in searching suggestions from an input field. This application give the user a quick suggestion for searching a list of countries. It allows the user to fill the input if he/she clicks on the suggestion.","archived":false,"fork":false,"pushed_at":"2021-02-19T02:35:05.000Z","size":34,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T18:52:04.648Z","etag":null,"topics":["autocomplete","autocomplete-search","autocompletion","html","html-css-javascript","html5","javascript","web-app","web-developer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrispenGari.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-19T02:33:01.000Z","updated_at":"2022-09-17T12:49:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"13a3a005-f617-4240-8324-5fcab93c24de","html_url":"https://github.com/CrispenGari/auto-complet-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CrispenGari/auto-complet-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fauto-complet-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fauto-complet-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fauto-complet-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fauto-complet-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrispenGari","download_url":"https://codeload.github.com/CrispenGari/auto-complet-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrispenGari%2Fauto-complet-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35505612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-15T02:00:06.706Z","response_time":131,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","autocomplete-search","autocompletion","html","html-css-javascript","html5","javascript","web-app","web-developer"],"created_at":"2024-12-16T21:46:39.536Z","updated_at":"2026-07-15T12:39:02.375Z","avatar_url":"https://github.com/CrispenGari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Auto Complete Search Input\n\nThis is a simple JavaScript web application that help in searching suggestions from an input field. This application give the user a quick suggestion for searching a list of countries. It allows the user to fill the input if he/she clicks on the suggestion.\n\n## Demo\n\n![alt-text](https://github.com/CrispenGari/auto-complet-js/blob/main/bandicam%202021-02-19%2004-31-15-333.jpg)\n\n## This application is using\n\n- html\n- css\n- javascript\n\n## This application will cover the following\n\n- `map` function in js\n- `filter` function in js\n- `Regx` in js\n\n### Implementation\n\nWe have 4 files which are as follows.\n\n- index.html\n- index.css\n- countries.js\n- index.js\n\n##### `index.html`\n\nThis file contains the html code for the whole application. This is where the entry point `index.js` sat and, this is where the input and the suggestion container sat as well. The code of it looks as follows:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"index.css\" /\u003e\n    \u003ctitle\u003eAuto Complete\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"main\"\u003e\n      \u003cdiv class=\"main__input\"\u003e\n        \u003cinput\n          type=\"text\"\n          id=\"main__input__text\"\n          placeholder=\"Search keywords\"\n        /\u003e\n        \u003cdiv class=\"main__suggestions\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"index.js\" type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n##### `index.css`\n\nThis file contains all the styles for the application. The code in this file looks as follows:\n\n```\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n    Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n.main {\n  width: 100%;\n}\n.main__input {\n  width: 100%;\n  max-width: 500px;\n  padding: 10px;\n  display: flex;\n  margin: 10px auto;\n  background-color: black;\n  flex-direction: column;\n}\n.main__input \u003e input {\n  flex: 1;\n  padding: 5px;\n  outline: none;\n  border: none;\n  border-radius: 5px;\n}\n.main__suggestions {\n  background: #f5f5f5;\n  margin-top: 0;\n  border-radius: 5px !important;\n}\n.main__suggestion {\n  padding: 5px;\n  font-size: 15px;\n  border-radius: 5px !important;\n  user-select: none;\n  user-zoom: none;\n}\n.main__suggestions \u003e .main__suggestion:nth-child(even) {\n  background: #fafafa;\n}\n.main__suggestion:hover {\n  background: lightseagreen;\n  color: white;\n  cursor: pointer;\n}\n\n```\n\n##### `countries.js`\n\nThis file contains array of countries that we are going to use for suggestions. The structure of this file looks as follows:\n\n```\nconst countryList = [\n  \"Afghanistan\",\n  \"Albania\",\n   ...\n  \"Zambia\",\n  \"Zimbabwe\",\n  \"Åland Islands\",\n];\n\nexport default countryList;\n\n```\n\n##### `index.js`\n\nThis is where the code and the implementation of the auto-completion is. In this file we have 2 main functions, and some event listeners. Which i will go through them step by step.\n\n##### Step 1: Import the countries array\n\nImport the countries array from the `countries.js` file as follows:\n\n```\nimport countries from \"./countries.js\";\n```\n\n##### Step 2: Create global variables\n\nCreate the global variables the one will hold the `results` which is the results list of the suggestions. The `query` is targeting the input from the input field. and finally the `suggestionList` will be the container of the suggestions.\n\n```\nconst query = document.querySelector(\"input#main__input__text\");\nconst suggestionList = document.querySelector(\".main__suggestions\");\n//  The result array that will hold all the suggestionList\nlet result = [];\n```\n\n##### Step 3: Listen to the change in input\n\nAdd an event listener that will watch the change in the input value of the `query`. Every time the input changes we want to search for the countries that matches the search query so we will pass the query value to the function `search` which will be created after. When the input is `null` which means no suggestions should be shown hence we set the innerHTML of the suggestion to an empty string. The following code does the functionality of getting the input and pass it to the search function.\n\n```\nquery.addEventListener(\"input\", () =\u003e {\n  if (query.value.length === 0) {\n    suggestionList.innerHTML = \"\";\n  }\n  search(query.value);\n});\n```\n\n##### Step 4: The search function\n\nAs it recieves the parameter the search function will then look for matches and update the results array according to the matches. Using the filter function which is fired if the query is not `null` we created a regular expression which will match starting with query and it is matching globally and it's case insensitive. In the event that there are no matches we try to search the countries using the indexing method. If there's any string that is closer to that we update the results array as well. But remember the results should be looped through them and display the suggestions to the user. If the results length is greater than 0 which means suggestions has been found we want to splice and grab the first 5 best results of the suggestion, and pass it to the `showSuggestions` function which will be created after.\n\n```\nconst search = (query) =\u003e {\n  // Only search if and only if there's input\n  if (query.length \u003e 0) {\n    result = countries.filter((country) =\u003e {\n      /*\n    We want the countries that start with the query first\n    globally and case insensitive\n    */\n      const exp = new RegExp(`^${query}`, \"gi\");\n      return country.match(exp);\n    });\n    if (result.length === 0) {\n      // try to search using index\n      result = countries.filter((country) =\u003e country.indexOf(query) !== -1);\n    }\n    if (result.length \u003e 0) {\n      //   Show the suggestionList to the dom only the first 5\n      showSuggestions(result.splice(0, 5));\n    }\n  }\n};\n```\n\n##### Step 4: Display the suggestions.\n\nNow we have the suggestions list we can now display them to the user. We will create an `resultHtml` Variable which we populate with arrays of suggestions `div` items with the id `suggest`. We will get an array of `divs` and we will join them using an empty string so that we will get one html tag which will be mounted to the `suggestionList` container div.\n\n```\nconst showSuggestions = (results) =\u003e {\n  const resultHtml = results.map((result, index) =\u003e {\n    return ` \u003cdiv class=\"main__suggestion\" id=\"suggest\" key=${index}\u003e${result}\u003c/div\u003e`;\n  });\n  suggestionList.innerHTML = resultHtml.join(\"\");\n};\n```\n\n##### Step 5: Add the clicked suggestion test to the input field.\n\nIf the user clicks on the suggestion then we should add the text of the suggestion to the input field. So we will listen to the event click on the document and check if the target has an id of `suggest`. If thats the case we grab the innerText and change the value of the input field to that. Then `results` and `suggestionList` should be restored.\n\n```\ndocument.addEventListener(\"click\", function (event) {\n  if (event.target \u0026\u0026 event.target.id == \"suggest\") {\n    query.value = event.target.innerText;\n    suggestionList.innerHTML = \"\";\n    result = [];\n  }\n});\n```\n\n##### The `index.js` file\n\nThis is the code of the index.js file in one place.\n\n```\nimport countries from \"./countries.js\";\n\nconst query = document.querySelector(\"input#main__input__text\");\nconst suggestionList = document.querySelector(\".main__suggestions\");\n//  The result array that will hold all the suggestionList\nlet result = [];\nquery.addEventListener(\"input\", () =\u003e {\n  if (query.value.length === 0) {\n    suggestionList.innerHTML = \"\";\n  }\n  search(query.value);\n});\nconst search = (query) =\u003e {\n  // Only search if and only if there's input\n  if (query.length \u003e 0) {\n    result = countries.filter((country) =\u003e {\n      /*\n    We want the countries that start with the query first\n    globally and case insensitive\n    */\n      const exp = new RegExp(`^${query}`, \"gi\");\n      return country.match(exp);\n    });\n    if (result.length === 0) {\n      // try to search using index\n      result = countries.filter((country) =\u003e country.indexOf(query) !== -1);\n    }\n    if (result.length \u003e 0) {\n      //   Show the suggestionList to the dom only the first 5\n      showSuggestions(result.splice(0, 5));\n    }\n  }\n};\n\nconst showSuggestions = (results) =\u003e {\n  const resultHtml = results.map((result, index) =\u003e {\n    return ` \u003cdiv class=\"main__suggestion\" id=\"suggest\" key=${index}\u003e${result}\u003c/div\u003e`;\n  });\n  suggestionList.innerHTML = resultHtml.join(\"\");\n};\n\ndocument.addEventListener(\"click\", function (event) {\n  if (event.target \u0026\u0026 event.target.id == \"suggest\") {\n    query.value = event.target.innerText;\n    suggestionList.innerHTML = \"\";\n    result = [];\n  }\n});\n\n```\n\n### Credits\n\n- [Stackoverflow](https://stackoverflow.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Fauto-complet-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrispengari%2Fauto-complet-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrispengari%2Fauto-complet-js/lists"}