{"id":16446481,"url":"https://github.com/fbukevin/auto-complete.js","last_synced_at":"2026-05-17T14:34:27.207Z","repository":{"id":34522660,"uuid":"38464997","full_name":"fbukevin/auto-complete.js","owner":"fbukevin","description":null,"archived":false,"fork":false,"pushed_at":"2015-07-21T02:10:46.000Z","size":508,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2025-02-26T10:16:44.563Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://fbukevin.github.io/auto-complete.js/","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/fbukevin.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}},"created_at":"2015-07-03T01:21:33.000Z","updated_at":"2015-07-08T08:20:24.000Z","dependencies_parsed_at":"2022-09-14T14:11:07.576Z","dependency_job_id":null,"html_url":"https://github.com/fbukevin/auto-complete.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fbukevin/auto-complete.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbukevin%2Fauto-complete.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbukevin%2Fauto-complete.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbukevin%2Fauto-complete.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbukevin%2Fauto-complete.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fbukevin","download_url":"https://codeload.github.com/fbukevin/auto-complete.js/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fbukevin%2Fauto-complete.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33142247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-10-11T09:47:43.233Z","updated_at":"2026-05-17T14:34:27.176Z","avatar_url":"https://github.com/fbukevin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## How did I do?\n1. I used \\\u003clist\u003e, \\\u003cspan\u003e and \\\u003cinput\u003e to finish this test.\n\n\t![](1.png)\n\n\tWhen type in a letter, `onkeyup` event triggers `query()` handler to query for autocompletion. Each confirmed input will be inserted into a span as an entry of list.\n\t\n\t```\n\t\u003cul\u003e\n\t\t\u003cli\u003e\n\t\t\t\u003cspan\u003eHarbin\u003c/span\u003e\n\t\t\u003c/li\u003e\n\t\u003c/ul\u003e\n\t```\n\tAfter intertion complete, a new span for next insertion will be created.\t\n\tEach inserted tag has a clickable multiply sign. It allows you remove a tag by clicking the sign.\n\n\t![](3.png)\n\t\n2. Autocomplete was done by calling a function `grep` with a callback function to do pattern matching.\n\t```\n\tset = grep(pattern, function(city, pattern){ \n\t\t  \t  return pattern.test(city);\n\t\t  });\n\t```\n\tWhat grep does is taking each item in list `timezone` for callback. The reason I used callback is that if the number of matching items is large, or if matching remotely, callback can avoid blocking if network is blocked.\n\n\t![](2.png)\n\t \t\n3. After remove a tag, we should check if the instertion list still contains item conforming in timezone. If is, keep submit button enable, otherwise, disable submit button. I reached this goal by checking a global variable `tz_tags` instead of traversing all list again. `tz_tags` will be accumulated each time when a tag conforming in timezone list was added, and will be decelerated each removal.\n\n\t![](4.png)  ===\u003e  ![](5.png)\n\n\n\n# Unit-testable and reusable\nWe can use web-based test framework, like karma, to do unit test for each function. The following are test by console in web browser.\n\n* addTag()\n\n\t![](t1.png)\n\n* removeTag()\n\n\t![](t2.png)\n\n* grep()\n\n\t![](t3.png)\n\nI separated pattern matching, add and remove tag into individual function. So that we can test each independently.\n\nBecause `query()` function need to distinguish keycode of input, I didn't try it in browser console, but this work can be done by using automatic web test tool.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbukevin%2Fauto-complete.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffbukevin%2Fauto-complete.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffbukevin%2Fauto-complete.js/lists"}