html - Javascript search and display divs with matching keywords -
what i'm looking for:
i'm working on creating easy way user search list of people, , results instantly display below search field. results must display "close" results, rather exact. example: user searches "mr. smith" , next existing result displayed: "john smith" (since there no "mr. smith" entry, displayed 1 keyword "smith")
what have:
i have working code lets user come in characters , divs include string matching input displayed (see in jsfiddle: http://jsfiddle.net/891nvajb/5/ code below) unfortunately, displays results match exactly.
class="snippet-code-html lang-html prettyprint-override"><body> <input type="text" id="edit_search" onkeyup="javascript: find_my_div();"> <input type="button" onclick="javascript: find_my_div();" value="find"> <script> function gid(a_id) { return document.getelementbyid (a_id) ; } function close_all(){ for (i=0;i<999; i++) { var o = gid("user_"+i); if (o) { o.style.display = "none"; } } } function find_my_div(){ close_all(); var o_edit = gid("edit_search"); var str_needle = edit_search.value; str_needle = str_needle.touppercase(); if (str_needle != "") { for (i=0;i<999; i++) { var o = gid("user_"+i); if (o) { var str_haystack = o.innerhtml.touppercase(); if (str_haystack.indexof(str_needle) ==-1) { // not found, nil } else{ o.style.display = "block"; } } } } } </script> <div id="user_0" style="display:none">andy daulton<br/>owner nissan<br/><br/></div> <div id="user_1" style="display:none">doug guy<br/>bug collector<br/><br/></div> <div id="user_2" style="display:none">sam hilton<br/>famous celebrity in hollywood<br/><br/></div> <div id="user_3" style="display:none">don grey<br/>old man<br/><br/></div> <div id="user_4" style="display:none">amy hinterly<br/>cook<br/><br/></div> <div id="user_5" style="display:none">gary doll<br/>racecar driver<br/><br/></div> <div id="user_6" style="display:none">tod akers<br/>football player<br/><br/></div> <div id="user_7" style="display:none">greg barkley<br/>interior designer<br/><br/></div> <div id="user_8" style="display:none">alen simmons<br/>8th place winner<br/><br/></div>
split words in search string regex
searchstring.split(/\w/); and or search on each of words in resulting array.
updated fiddle
var searchstrings = str_needle.split(/\w/); (var = 0, len = searchstrings.length; < len; i++) { var currentsearch = searchstrings[i].touppercase(); if (currentsearch !== "") { namedivs = document.getelementsbyclassname("name"); (var j = 0, divslen = namedivs.length; j < divslen; j++) { if (namedivs[j].textcontent.touppercase().indexof(currentsearch) !== -1) { namedivs[j].style.display = "block"; } } } } javascript html search user-input displayobject
No comments:
Post a Comment