Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript search and display divs with matching keywords

What I'm looking for:

I'm working on creating an easy way for a user to search a list of people, and for results to instantly display below the search field. The results MUST display "close" results, rather than exact. For example: User searches for "Mr. Smith" and The following existing result is displayed: "John Smith" (since there is no "Mr. Smith" entry, it displayed one with the keyword "smith")

What I have:

I have a working code that lets the user enter some characters and all divs that include a string matching the input is displayed (see in jsfiddle: http://jsfiddle.net/891nvajb/5/ Code is also below) Unfortunately, this only displays results that match EXACTLY.

<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, do nothing
	  		}
	  		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>
like image 671
Steve Avatar asked Oct 21 '14 18:10

Steve


1 Answers

Split the words in the search string with a regex like

searchString.split(/\W/);

and do a OR search over each of the words in the resulting array.

Updated fiddle

var searchStrings = str_needle.split(/\W/);

for (var i = 0, len = searchStrings.length; i < len; i++) {
    var currentSearch = searchStrings[i].toUpperCase();
    if (currentSearch !== "") {
        nameDivs = document.getElementsByClassName("name");
        for (var j = 0, divsLen = nameDivs.length; j < divsLen; j++) {
            if (nameDivs[j].textContent.toUpperCase().indexOf(currentSearch) !== -1) {
                nameDivs[j].style.display = "block";
            }
        }
    }
}
like image 190
Matt R Avatar answered Oct 20 '22 15:10

Matt R