https://github.com/fbukevin/auto-complete.js
https://github.com/fbukevin/auto-complete.js
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fbukevin/auto-complete.js
- Owner: fbukevin
- Created: 2015-07-03T01:21:33.000Z (almost 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-07-21T02:10:46.000Z (almost 11 years ago)
- Last Synced: 2025-02-26T10:16:44.563Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://fbukevin.github.io/auto-complete.js/
- Size: 496 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## How did I do?
1. I used \, \ and \ to finish this test.
When 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.
```
-
Harbin
```
After intertion complete, a new span for next insertion will be created.
Each inserted tag has a clickable multiply sign. It allows you remove a tag by clicking the sign.
2. Autocomplete was done by calling a function `grep` with a callback function to do pattern matching.
```
set = grep(pattern, function(city, pattern){
return pattern.test(city);
});
```
What 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.
3. 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.
 ===> 
# Unit-testable and reusable
We can use web-based test framework, like karma, to do unit test for each function. The following are test by console in web browser.
* addTag()
* removeTag()
* grep()
I separated pattern matching, add and remove tag into individual function. So that we can test each independently.
Because `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.