Exercise

Filter Search

Bob Ziroll

Aug 27, 2015 • 1 min read

Create an Angular or HTML app that has an search box (input box).

You will have an array stored somewhere that has at least 20 words. You can use this array and add/subtract from it as you wish:

['change', 'rack', 'world', 'file', 'cat', 'car', 'baccarat', 'dog', 'window', 'drink', 'computer', 'hello', 'words', 'keys', 'ship', 'fence', 'widow', 'cheese', 'basketball', 'hyper', 'javascript']

As the user starts typing in the search box you will need to print the filtered results into the console. Meaning every keystroke made creates a filter and console.logs the filteredArray.

So if you had an array like this:

var words = ["cat","car","dog","rack", "baccarat"]

And if the letter entered in the box was "c", the console would print:

["cat","car","rack", "baccarat"]

If the letter entered was "ca" the console would print:

["cat", "car", "baccarat"]

And so forth.

You'll probably want to look into using AngularJS's ngChange directive, as well as JavaScript's indexOf() string method. Simply put, ngChange looks for changes in an ngModel and executes whatever JavaScript expression you put in the quotes anytime that ngModel changes. Google it for more info.

Sign up for more like this.