A Pen by Nick Sherron on CodePen.
Created
June 27, 2018 06:48
-
-
Save nicksherron/352d4c1ecb9bd23e5d292a8ba6de3065 to your computer and use it in GitHub Desktop.
JSON Search Engine
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form> | |
| <div class="row"> | |
| <div class="medium-6 columns"> | |
| <label>Search | |
| <input id="searchText" type="text" placeholder="search"> | |
| </label> | |
| <label>Search by: | |
| <select id="searchField"> | |
| <option value="name">Name</option> | |
| <option value="city">City</option> | |
| </select> | |
| </label> | |
| <div class="button-group"> | |
| <label>Sort by:</label> | |
| <a class="button sort" data-filter="name">Name</a> | |
| <a class="button sort" data-filter="city">City</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <div class="row"> | |
| <div class="medium-6 columns"> | |
| <button id="search" type="button" class="button expanded">Search</button> | |
| </div> | |
| </div> --> | |
| </form> | |
| <script id="results" type="text/x-handlebars-template"> | |
| {{#each this}} | |
| <div class="row sort-item" data-name="{{name}}" data-city="{{city}}"> | |
| <div class="small-12 columns"> | |
| <h1>{{name}}</h1> | |
| <h2>City: {{city}}</h2> | |
| <hr /> | |
| </div> | |
| </div> | |
| {{/each}} | |
| </script> | |
| <div class="row"> | |
| <div id="output"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var data = [{ | |
| "name": "Celina Kelley", | |
| "city": "Conestoga" | |
| }, { | |
| "name": "Cherry Atkins", | |
| "city": "Nash" | |
| }, { | |
| "name": "Elisa Bartlett", | |
| "city": "Biddle" | |
| }, { | |
| "name": "Ina Wright", | |
| "city": "Caspar" | |
| }, { | |
| "name": "Geneva Cash", | |
| "city": "Shaft" | |
| }, { | |
| "name": "Graham Wolf", | |
| "city": "Groton" | |
| }, { | |
| "name": "Sutton Cortez", | |
| "city": "Linwood" | |
| }, { | |
| "name": "Blake Montoya", | |
| "city": "Gasquet" | |
| }, { | |
| "name": "Katrina Schwartz", | |
| "city": "Kenmar" | |
| }, { | |
| "name": "Vickie Rowland", | |
| "city": "Trucksville" | |
| }, { | |
| "name": "Luz Mcdowell", | |
| "city": "Williams" | |
| }, { | |
| "name": "Molina Odom", | |
| "city": "Goldfield" | |
| }, { | |
| "name": "Betsy Lara", | |
| "city": "Sylvanite" | |
| }, { | |
| "name": "Florence English", | |
| "city": "Joes" | |
| }, { | |
| "name": "Keri Raymond", | |
| "city": "Maxville" | |
| }, { | |
| "name": "Hodge Burnett", | |
| "city": "Dodge" | |
| }, { | |
| "name": "Naomi Kinney", | |
| "city": "Bangor" | |
| }, { | |
| "name": "Pena Riley", | |
| "city": "Baden" | |
| }, { | |
| "name": "Reid Barton", | |
| "city": "Robinette" | |
| }, { | |
| "name": "Penelope Morton", | |
| "city": "Mapletown" | |
| }, { | |
| "name": "Kim Craft", | |
| "city": "Ballico" | |
| }, { | |
| "name": "Lolita Cabrera", | |
| "city": "Guthrie" | |
| }, { | |
| "name": "Robles Duke", | |
| "city": "Suitland" | |
| }, { | |
| "name": "Aguilar Dotson", | |
| "city": "Sterling" | |
| }, { | |
| "name": "Santiago Baird", | |
| "city": "Fairlee" | |
| }, { | |
| "name": "Susana Dunlap", | |
| "city": "Waukeenah" | |
| }, { | |
| "name": "Hicks Conner", | |
| "city": "Eden" | |
| }, { | |
| "name": "Harrison Holland", | |
| "city": "Turah" | |
| }, { | |
| "name": "Strong Cain", | |
| "city": "Shepardsville" | |
| }, { | |
| "name": "Duran Shelton", | |
| "city": "Nord" | |
| }, { | |
| "name": "Mendez Warner", | |
| "city": "Joppa" | |
| }, { | |
| "name": "Shawn Leon", | |
| "city": "Sanborn" | |
| }, { | |
| "name": "Tamra Singleton", | |
| "city": "Santel" | |
| }, { | |
| "name": "Carrillo Weaver", | |
| "city": "Rew" | |
| }, { | |
| "name": "Estelle Peterson", | |
| "city": "Russellville" | |
| }, { | |
| "name": "Helene Brewer", | |
| "city": "Northridge" | |
| }, { | |
| "name": "Joy Reyes", | |
| "city": "Idledale" | |
| }, { | |
| "name": "Gwendolyn Simmons", | |
| "city": "Lookingglass" | |
| }, { | |
| "name": "Beryl Herring", | |
| "city": "Tolu" | |
| }, { | |
| "name": "Allen Lawson", | |
| "city": "Disautel" | |
| }, { | |
| "name": "Vanessa Carrillo", | |
| "city": "Newkirk" | |
| }, { | |
| "name": "Terry Weber", | |
| "city": "Oretta" | |
| }, { | |
| "name": "Luisa Pennington", | |
| "city": "Welda" | |
| }, { | |
| "name": "Linda Horn", | |
| "city": "Falmouth" | |
| }, { | |
| "name": "Marion Alvarado", | |
| "city": "Rutherford" | |
| }, { | |
| "name": "Leona Welch", | |
| "city": "Zortman" | |
| }, { | |
| "name": "Winnie Hughes", | |
| "city": "Cornfields" | |
| }, { | |
| "name": "Helena Lewis", | |
| "city": "Lisco" | |
| }, { | |
| "name": "Angelique Gallagher", | |
| "city": "Wolcott" | |
| }, { | |
| "name": "Roxie Fernandez", | |
| "city": "Troy" | |
| }, { | |
| "name": "Gill Levy", | |
| "city": "Cressey" | |
| }, { | |
| "name": "Bonner Huff", | |
| "city": "Harrison" | |
| }, { | |
| "name": "Freeman Stanley", | |
| "city": "Munjor" | |
| }, { | |
| "name": "Hallie Mccarthy", | |
| "city": "Jacksonburg" | |
| }, { | |
| "name": "Myrna Contreras", | |
| "city": "Grimsley" | |
| }, { | |
| "name": "Bauer Witt", | |
| "city": "Graball" | |
| }, { | |
| "name": "Case Graham", | |
| "city": "Turpin" | |
| }, { | |
| "name": "Waters Camacho", | |
| "city": "Ferney" | |
| }, { | |
| "name": "Darcy Gregory", | |
| "city": "Newry" | |
| }, { | |
| "name": "Holcomb Curtis", | |
| "city": "Brady" | |
| }, { | |
| "name": "Laverne Gould", | |
| "city": "Oasis" | |
| }, { | |
| "name": "Puckett Jones", | |
| "city": "Kidder" | |
| }, { | |
| "name": "Jenny Sandoval", | |
| "city": "Calverton" | |
| }, { | |
| "name": "Kathryn Noel", | |
| "city": "Muir" | |
| }, { | |
| "name": "Bowen Williams", | |
| "city": "Norris" | |
| }, { | |
| "name": "Deanne Obrien", | |
| "city": "Brambleton" | |
| }, { | |
| "name": "Gregory Mack", | |
| "city": "Edinburg" | |
| }, { | |
| "name": "Mary Webster", | |
| "city": "National" | |
| }, { | |
| "name": "Winters Hester", | |
| "city": "Wintersburg" | |
| }, { | |
| "name": "Gilbert Fowler", | |
| "city": "Accoville" | |
| }, { | |
| "name": "Keller Shepherd", | |
| "city": "Nescatunga" | |
| }, { | |
| "name": "Coleen Sparks", | |
| "city": "Thornport" | |
| }, { | |
| "name": "Burks Whitfield", | |
| "city": "Enoree" | |
| }, { | |
| "name": "Bird Dale", | |
| "city": "Flintville" | |
| }, { | |
| "name": "Livingston Rollins", | |
| "city": "Bridgetown" | |
| }, { | |
| "name": "Tammi Bonner", | |
| "city": "Masthope" | |
| }, { | |
| "name": "Anderson Marshall", | |
| "city": "Spelter" | |
| }, { | |
| "name": "Dillard Wall", | |
| "city": "Leroy" | |
| }, { | |
| "name": "Hayes Roberson", | |
| "city": "Dupuyer" | |
| }, { | |
| "name": "Tiffany Rodriguez", | |
| "city": "Savannah" | |
| }, { | |
| "name": "Candy Ruiz", | |
| "city": "Bartonsville" | |
| }, { | |
| "name": "Camille Logan", | |
| "city": "Clara" | |
| }, { | |
| "name": "Slater Monroe", | |
| "city": "Urie" | |
| }, { | |
| "name": "Greer Hampton", | |
| "city": "Bentley" | |
| }, { | |
| "name": "Hodges Ward", | |
| "city": "Manchester" | |
| }, { | |
| "name": "Ana Mercado", | |
| "city": "Weedville" | |
| }, { | |
| "name": "Beard Lee", | |
| "city": "Corriganville" | |
| }, { | |
| "name": "Meadows Hines", | |
| "city": "Kipp" | |
| }, { | |
| "name": "Ramona Beck", | |
| "city": "Summerfield" | |
| }, { | |
| "name": "Cruz Roth", | |
| "city": "Day" | |
| }, { | |
| "name": "Alvarado Dejesus", | |
| "city": "Austinburg" | |
| }, { | |
| "name": "Crystal Clarke", | |
| "city": "Chical" | |
| }, { | |
| "name": "Alyce Mcknight", | |
| "city": "Romeville" | |
| }, { | |
| "name": "Jerry Gordon", | |
| "city": "Westphalia" | |
| }, { | |
| "name": "Rita White", | |
| "city": "Fairforest" | |
| }, { | |
| "name": "Beverly Cohen", | |
| "city": "Stockdale" | |
| }, { | |
| "name": "Middleton Heath", | |
| "city": "Chaparrito" | |
| }, { | |
| "name": "Rosella Bowen", | |
| "city": "Moscow" | |
| }, { | |
| "name": "Frieda Rojas", | |
| "city": "Strong" | |
| }, { | |
| "name": "Monique Owens", | |
| "city": "Dellview" | |
| }, { | |
| "name": "Bishop Head", | |
| "city": "Hegins" | |
| }, { | |
| "name": "Hendricks Gibson", | |
| "city": "Garfield" | |
| }, { | |
| "name": "Hays Wells", | |
| "city": "Lloyd" | |
| }, { | |
| "name": "Solomon Burton", | |
| "city": "Sanders" | |
| }, { | |
| "name": "Elvia Porter", | |
| "city": "Wanamie" | |
| }, { | |
| "name": "Bessie Fleming", | |
| "city": "Summertown" | |
| }, { | |
| "name": "Althea Stout", | |
| "city": "Grahamtown" | |
| }, { | |
| "name": "Hall Wilkerson", | |
| "city": "Herald" | |
| }, { | |
| "name": "Cooley Franklin", | |
| "city": "Leeper" | |
| }, { | |
| "name": "Matthews Wise", | |
| "city": "Bethpage" | |
| }, { | |
| "name": "Dale Hayes", | |
| "city": "Fulford" | |
| }, { | |
| "name": "Gwen Hickman", | |
| "city": "Sunnyside" | |
| }, { | |
| "name": "Clemons Wade", | |
| "city": "Columbus" | |
| }, { | |
| "name": "Milagros Barry", | |
| "city": "Orovada" | |
| }, { | |
| "name": "Cardenas Langley", | |
| "city": "Coventry" | |
| }, { | |
| "name": "Robbie Burns", | |
| "city": "Bannock" | |
| }, { | |
| "name": "Sabrina Miranda", | |
| "city": "Cowiche" | |
| }, { | |
| "name": "Mcleod Good", | |
| "city": "Matthews" | |
| }, { | |
| "name": "Natalia Bruce", | |
| "city": "Martinsville" | |
| }, { | |
| "name": "Eddie Clemons", | |
| "city": "Interlochen" | |
| }, { | |
| "name": "Skinner Mosley", | |
| "city": "Caroline" | |
| }, { | |
| "name": "Knapp Simpson", | |
| "city": "Movico" | |
| }, { | |
| "name": "Jones Garner", | |
| "city": "Gila" | |
| }, { | |
| "name": "Jerri Sanford", | |
| "city": "Stonybrook" | |
| }, { | |
| "name": "Brandie Sheppard", | |
| "city": "Roderfield" | |
| }, { | |
| "name": "Rosanne Hale", | |
| "city": "Katonah" | |
| }, { | |
| "name": "Tyler Kelly", | |
| "city": "Greensburg" | |
| }, { | |
| "name": "Amalia Castaneda", | |
| "city": "Brookfield" | |
| }, { | |
| "name": "Morales Payne", | |
| "city": "Witmer" | |
| }, { | |
| "name": "Reba Finch", | |
| "city": "Buxton" | |
| }, { | |
| "name": "Effie Church", | |
| "city": "Omar" | |
| }, { | |
| "name": "Lynn Tillman", | |
| "city": "Vandiver" | |
| }, { | |
| "name": "Mathis Padilla", | |
| "city": "Cucumber" | |
| }, { | |
| "name": "Katie Durham", | |
| "city": "Bergoo" | |
| }, { | |
| "name": "Kemp Harvey", | |
| "city": "Harmon" | |
| }, { | |
| "name": "Flores Colon", | |
| "city": "Chicopee" | |
| }, { | |
| "name": "Stewart Wallace", | |
| "city": "Tonopah" | |
| }, { | |
| "name": "Crosby Greer", | |
| "city": "Roosevelt" | |
| }, { | |
| "name": "Vega Gardner", | |
| "city": "Frank" | |
| }, { | |
| "name": "Bradshaw Ortega", | |
| "city": "Roland" | |
| }, { | |
| "name": "Stacie Nelson", | |
| "city": "Chamberino" | |
| }, { | |
| "name": "Dorothea Cobb", | |
| "city": "Hackneyville" | |
| }, { | |
| "name": "Regina Barrett", | |
| "city": "Salvo" | |
| }, { | |
| "name": "Bowers Valdez", | |
| "city": "Loyalhanna" | |
| }, { | |
| "name": "Constance Harmon", | |
| "city": "Sisquoc" | |
| }, { | |
| "name": "Bobbi Long", | |
| "city": "Nipinnawasee" | |
| }, { | |
| "name": "Lee Harrison", | |
| "city": "Fredericktown" | |
| }, { | |
| "name": "Phillips Perry", | |
| "city": "Umapine" | |
| }, { | |
| "name": "Robbins Jenkins", | |
| "city": "Tuttle" | |
| }, { | |
| "name": "Juliet Hubbard", | |
| "city": "Callaghan" | |
| }, { | |
| "name": "Debora Henson", | |
| "city": "Lutsen" | |
| }, { | |
| "name": "Dotson Evans", | |
| "city": "Naomi" | |
| }, { | |
| "name": "Pollard Flowers", | |
| "city": "Dixie" | |
| }, { | |
| "name": "Alba Knox", | |
| "city": "Evergreen" | |
| }, { | |
| "name": "Mejia Mcmahon", | |
| "city": "Gerber" | |
| }, { | |
| "name": "Lakisha Hurley", | |
| "city": "Lewis" | |
| }, { | |
| "name": "Chris Calhoun", | |
| "city": "Orick" | |
| }, { | |
| "name": "Pugh Flynn", | |
| "city": "Cavalero" | |
| }, { | |
| "name": "Cunningham Fox", | |
| "city": "Wollochet" | |
| }, { | |
| "name": "Alisha Whitehead", | |
| "city": "Wattsville" | |
| }, { | |
| "name": "Anne Kemp", | |
| "city": "Leola" | |
| }, { | |
| "name": "Myers Taylor", | |
| "city": "Trinway" | |
| }, { | |
| "name": "Johns Hopkins", | |
| "city": "Glenville" | |
| }, { | |
| "name": "Cecilia Hogan", | |
| "city": "Brogan" | |
| }, { | |
| "name": "Jeri Fisher", | |
| "city": "Leland" | |
| }, { | |
| "name": "Forbes Torres", | |
| "city": "Wells" | |
| }, { | |
| "name": "Adrienne Russo", | |
| "city": "Darlington" | |
| }, { | |
| "name": "Madeline Lucas", | |
| "city": "Lopezo" | |
| }, { | |
| "name": "Yesenia Sykes", | |
| "city": "Stouchsburg" | |
| }, { | |
| "name": "Villarreal Harper", | |
| "city": "Cloverdale" | |
| }, { | |
| "name": "Spears Sullivan", | |
| "city": "Harrodsburg" | |
| }, { | |
| "name": "Emerson Garrett", | |
| "city": "Innsbrook" | |
| }, { | |
| "name": "Soto Sanders", | |
| "city": "Cornucopia" | |
| }, { | |
| "name": "Faulkner Jarvis", | |
| "city": "Staples" | |
| }, { | |
| "name": "Roseann Mullins", | |
| "city": "Barrelville" | |
| }, { | |
| "name": "Meyer Andrews", | |
| "city": "Inkerman" | |
| }, { | |
| "name": "Sears Christensen", | |
| "city": "Denio" | |
| }, { | |
| "name": "Gertrude Poole", | |
| "city": "Remington" | |
| }, { | |
| "name": "Shepard Day", | |
| "city": "Kaka" | |
| }, { | |
| "name": "Hinton Avila", | |
| "city": "Loma" | |
| }, { | |
| "name": "Deann Rose", | |
| "city": "Saticoy" | |
| }, { | |
| "name": "Giles Avery", | |
| "city": "Belva" | |
| }, { | |
| "name": "Freida Hebert", | |
| "city": "Lorraine" | |
| }, { | |
| "name": "Trina Barnes", | |
| "city": "Mappsville" | |
| }, { | |
| "name": "Marisol Knapp", | |
| "city": "Farmers" | |
| }, { | |
| "name": "Mccormick Lindsay", | |
| "city": "Abrams" | |
| }, { | |
| "name": "Michelle Wilkins", | |
| "city": "Hartsville/Hartley" | |
| }, { | |
| "name": "Bridges Moon", | |
| "city": "Rivereno" | |
| }, { | |
| "name": "Lou Kramer", | |
| "city": "Navarre" | |
| }, { | |
| "name": "Jordan Holman", | |
| "city": "Greenfields" | |
| }, { | |
| "name": "Knight Molina", | |
| "city": "Kieler" | |
| }, { | |
| "name": "Wolf Maddox", | |
| "city": "Ada" | |
| }, { | |
| "name": "Jackie Freeman", | |
| "city": "Brooktrails" | |
| }, { | |
| "name": "Thompson Powers", | |
| "city": "Woodlands" | |
| }, { | |
| "name": "Gutierrez Emerson", | |
| "city": "Veguita" | |
| }, { | |
| "name": "Faye Mcfarland", | |
| "city": "Cresaptown" | |
| }, { | |
| "name": "Carole Cline", | |
| "city": "Martinez" | |
| }, { | |
| "name": "Hannah Compton", | |
| "city": "Bentonville" | |
| }, { | |
| "name": "Greta Greene", | |
| "city": "Dalton" | |
| }, { | |
| "name": "Colleen Nixon", | |
| "city": "Waterloo" | |
| }]; | |
| var logTime = {}; | |
| function searchEngine(searchString, searchKey, searchData) { | |
| logTime.start = Date.now(); | |
| var result = []; | |
| $.each(searchData, function(i, item) { | |
| //console.log(this[searchKey].indexOf(searchString)); | |
| if (this[searchKey].toLowerCase().indexOf(searchString) > 0) { | |
| result.push(item); | |
| } | |
| }); | |
| //isotopeInit(); | |
| return result; | |
| }; | |
| var source = $("#results").html(); | |
| var template = Handlebars.compile(source); | |
| $("#searchText, #searchField").on("change paste keyup", function() { | |
| var searchText = $("#searchText").val().toLowerCase(); | |
| var searchField = $("#searchField").val(); | |
| console.log(searchField); | |
| //console.log(searchEngine(searchText,'name',data)); | |
| var searchResult = searchEngine(searchText, searchField, data) | |
| var html = template(searchResult); | |
| $("#output").html(html); | |
| var execTime = Date.now() - logTime.start; | |
| logTime.start = 0; | |
| $("#output").prepend("Search took " + execTime + "ms and returned " + searchResult.length + " result. </ br> No. of records " + data.length); | |
| }); | |
| // $(".sort").click(function(){ | |
| // var sort = $(this).data("sort"); | |
| // tinysort("#output>.row",{ | |
| // data: $(this).data("sort") | |
| // }).forEach(function(i){ | |
| // console.log(i); | |
| // console.log(this); | |
| // }); | |
| // }); | |
| var $results = $('#output').isotope({ | |
| itemSelector: '.sort-item' | |
| }); | |
| $('button.sort').click(function() { | |
| var filterValue = $(this).data(filter); | |
| $results.isotope({ | |
| filter: filterValue | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment