Use Typeahead js to do quick Search

JS References:


[Handlebar]


http://handlebarsjs.com/


[Typeahead]


https://twitter.github.io/typeahead.js/




Demo HTML:

<script src= "Jquery-1.11.1.min.js" ></script><script src= "Typeahead.bundle.js" ></script>  <script src= "Handlebars-v1.3.0.js" ></script><p>1.basic</p><div id= "The-basics" > <input class= "Typeahead" type= "text" placeholder= "states of USA" ></div><script>var     Substringmatcher_basic = function (STRs) {return function findmatches (q, CB) {var matches, Substrregex;     An array of that would be populated with substring matches matches = [];     Regex used to determine if a string contains the substring ' q ' substrregex = new RegExp (q, ' I '); Iterate through the pool of strings and for any string that//contains the substring ' q ', add it to the ' matches ' a Rray $.each (STRs, function (i, str) {if (Substrregex.test (str)) {//the Typeahead JQuery plugin expects Su      Ggestions to A//JavaScript object, refer to Typeahead docs for more info Matches.push ({value:str});  }    });   CB (matches); };}; var _data_states_basic = [' Alabama ', ' Alaska ', ' Arizona ', ' Arkansas ', ' California ', ' Colorado ', ' Connecticut ', ' Delaware ', ' Florida ', ' Georgia ', ' Hawaii ', ' Idaho ', ' Illinois ', ' Indiana ', ' Iowa ', ' Kansas ', ' Kentucky ', ' Louisiana ', ' Maine ', ' Maryland ', ' Massachusetts ', ' Michigan ', ' Minnesota ', ' Mississippi ', ' Missouri ', ' Montana ', ' Nebraska ', ' Nevada ', ' New Ha ' Mpshire ', ' New Jersey ', ' New Mexico ', ' New York ', ' North Carolina ', ' North Dakota ', ' Ohio ', ' Oklahoma ', ' Oregon ', ' Penns Ylvania ', ' Rhode Island ', ' South Carolina ', ' South Dakota ', ' Tennessee ', ' Texas ', ' Utah ', ' Vermont ', ' Virginia ', ' Washin Gton ', ' West Virginia ', ' Wisconsin ', ' Wyoming ']; $ (' #the-basics. Typeahead '). Typeahead ({hint:true, highlight:true, minlength:1},{name: ' states ', Displaykey: ' Val UE ', Source:substringmatcher_basic (_data_states_basic)}); </script><p>2.using Bloodhound</p> <div id= "Bloodhound" > <input class= "typeahead" type= "text" placeholder= "states of USA "></div><script>var _data_states_bloodhound = [' Alabama ', ' Alaska ', ' Arizona ', ' Arkansas ', ' California ', ' Colorado ', ' Connecticut ', ' Delaware ', ' Florida ', ' Georgia ', ' Hawaii ', ' Idaho ', ' Illinois ', ' Indiana ', ' Iow ' A ', ' Kansas ', ' Kentucky ', ' Louisiana ', ' Maine ', ' Maryland ', ' Massachusetts ', ' Michigan ', ' Minnesota ', ' Mississippi ', ' Mi Ssouri ', ' Montana ', ' Nebraska ', ' Nevada ', ' New Hampshire ', ' New Jersey ', ' New Mexico ', ' New York ', ' North Carolina ', ' Nor  Th Dakota ', ' Ohio ', ' Oklahoma ', ' Oregon ', ' Pennsylvania ', ' Rhode Island ', ' south of Carolina ', ' South Dakota ', ' Tennessee ', ' Texas ', ' Utah ', ' Vermont ', ' Virginia ', ' Washington ', ' West Virginia ', ' Wisconsin ', ' Wyoming '];var states_bloodhound = n EW Bloodhound ({datumTokenizer:Bloodhound.tokenizers.obj.whitespace (' value '), Querytokenizer:  Bloodhound.tokenizers.whitespace, Local: $.map (_data_states_bloodhound, function (state) {return {value:state};})}); Kicks off the loading/processing of ' local ' and ' PrefeTch ' states_bloodhound.initialize (); $ (' #bloodhound. Typeahead '). Typeahead ({hint:true, highlight:true, minlength:1},{name: ' states ', Displaykey: ' Val UE ',//' ttadapter ' wraps the suggestion engine in a adapter that//are compatible with the Typeahead JQuery plugin so Urce:states_bloodhound.ttAdapter ()}); </script><p>3. Pre-fetch (need to replace JSON URL) </p><div id= "prefetch" > <input class= "typeahead" type= "text" Placehol der= "Countries" ></div><script>var prefetch_countries = new Bloodhound ({datumtokenizer: Bloodhound.tokenizers.obj.whitespace (' name '), QueryTokenizer:Bloodhound.tokenizers.whitespace, Limit:10, prefetch : {URL: ' Your JSON URL here ', filter:function (list) {return $.map (list, function (country) {return {NAME:C Ountry};    }); }  }}); Kicks off the loading/processing of ' local ' and ' prefetch ' prefetch_countries.initialize (); Passing in ' null ' for the ' options ' arguments would result in the Default//options being used$ (' #prefetch. Typeahead '). Typeahead (null, {name: ' Prefetch_countries ', Displaykey: ' name ',// ' Ttadapter ' wraps the suggestion engine in a adapter that//was compatible with the Typeahead jQuery plugin SOURCE:PR Efetch_countries.ttadapter ()}); </script><p>4.custom template</p><style># Custom-templates. empty-message {padding:5px 10px; text-align:center;} </style><div id= "Custom-templates" > <input class= "typeahead" type= "text" placeholder= "Oscar winners For best Picture "></div><script>var _data_states_template_countries = [' Alabama ', ' Alaska ', ' Arizona ', ' Arkansas ', ' California ', ' Colorado ', ' Connecticut ', ' Delaware ', ' Florida ', ' Georgia ', ' Hawaii ', ' Idaho ', ' Illinois ', ' I Ndiana ', ' Iowa ', ' Kansas ', ' Kentucky ', ' Louisiana ', ' Maine ', ' Maryland ', ' Massachusetts ', ' Michigan ', ' Minnesota ', ' Miss ' Issippi ', ' Missouri ', ' Montana ', ' Nebraska ', ' Nevada ', ' New Hampshire ', ' New Jersey ', ' New Mexico ', ' New Yo 'RK ', ' North Carolina ', ' North Dakota ', ' Ohio ', ' Oklahoma ', ' Oregon ', ' Pennsylvania ', ' Rhode Island ', ' South Carolina ', ' South Dakota ', ' Tennessee ', ' Texas ', ' Utah ', ' Vermont ', ' Virginia ', ' Washington ', ' West Virginia ', ' Wisconsin ', ' Wyoming '  ];var custome_template_countries = new Bloodhound ({datumTokenizer:Bloodhound.tokenizers.obj.whitespace (' name '), QueryTokenizer:Bloodhound.tokenizers.whitespace, Limit:10, Local: $.map (_data_states_template_countries, function ( State) {return {name:state};})}); Kicks off the loading/processing of ' local ' and ' prefetch ' Custome_template_countries.initialize (); $ (' # Custom-templates. Typeahead '). Typeahead (null, {displaykey: ' name ', Source:custome_template_countries.ttAdapter (), t    Emplates: {empty: [' <div class= ' empty-message ' > ', ' Unable to find a country ', ' </div> ' ].join (' \ n '), Suggestion:Handlebars.compile (' <p><strong>{{name}}</strong></p> ')}});< /script><p&Gt;5.multiple data set</p><style> #multiple-datasets. league-name {margin:0 20px 5px 20px;  PADDING:3PX 0; border-bottom:1px solid #ccc;} </style><div id= "Multiple-datasets" > <input class= "typeahead" type= "text" placeholder= "NBA and NHL Teams "></div><script>var _data_nhlteam = [{" Team ":" New Jersey Devils "},{" Team ":" New York Islanders "}, {"Team": "New York Rangers"},{"Team": "Philadelphia Flyers"},{"team": "Pittsburgh Penguins"},{"team": "Chicago Blac Khawks "},{" team ": Columbus Blue Jackets"},{"team": "Detroit Red Wings"},{"Team": "Nashville Predators"},{"team": "St. Louis Blues"},{"team": "Boston Bruins"},{"team": "Buffalo Sabres"},{"team": "Montreal Canadiens"},{"team": "O Ttawa Senators "},{" team ":" Toronto Maple Leafs "},{" team ":" Calgary Flames "},{" team ":" Colorado Avalanche "},{" Team " : "Edmonton Oilers"},{"team": "Minnesota Wild"},{"team": "Vancouver Canucks"},{"team": "Carolina Hurricanes"},{"tEAM ":" Florida Panthers "},{" team ":" Tampa Bay Lightning "},{" team ":" Washington Capitals "},{" team ":" Winnipeg Jets "} {"Team": "Anaheim Ducks"},{"team": "Dallas Stars"},{"team": "Los Angeles Kings"},{"team": "Phoenix Coyotes"},{"t EAM ": San Jose Sharks"}];var _data_nbateam = [{"Team": "Boston Celtics"},{"team": "Dallas Mavericks"},{"team": "Bro Oklyn Nets "},{" team ":" Houston Rockets "},{" team ":" New York Knicks "},{" team ":" Memphis Grizzlies "},{" team ":" Phila  Delphia 76ers "},{" team ":" New Orleans Hornets "},{" team ":" Toronto Raptors "},{" team ":" San Antonio Spurs "},{" team ": "Chicago Bulls"},{"team": "Denver Nuggets"},{"team": "Cleveland Cavaliers"},{"team": "Minnesota Timberwolves"},{" Team ":" Detroit Pistons "},{" team ":" Portland Trail Blazers "},{" team ":" Indiana Pacers "},{" team ":" Oklahoma City Thun  Der "},{" "Team": "Milwaukee Bucks"},{"team": "Utah Jazz"},{"team": "Atlanta Hawks"},{"team": "Golden State Warriors" },{"Team": "CharlotteBobcats "},{" team: "Los Angeles Clippers"},{"team": "Miami Heat"},{"Team": "Los Angeles Lakers"},{"team": "Orlando Magic "},{" "Team": "Phoenix Suns"},{"team": "Washington Wizards"},{"Team": "Sacramento Kings"}];var nhlteams = new B Loodhound ({datumTokenizer:Bloodhound.tokenizers.obj.whitespace (' team '), Querytokenizer: Bloodhound.tokenizers.whitespace, Local: _data_nhlteam}); var nbateams = new Bloodhound ({datumTokenizer:Bloodhound.tokenizers.obj.whitespace (' team '), Querytokenizer: Bloodhound.tokenizers.whitespace, Local: _data_nbateam});  Nhlteams.initialize (); Nbateams.initialize (); $ (' #multiple-datasets. Typeahead '). Typeahead ({highlight:true},{ Displaykey: ' Team ', Source:nbaTeams.ttAdapter (), templates: {header: ' 


Use Typeahead js to do quick Search