Javascript search and display divs with matching keywords

Asked 21/10, 2014 at 18:27 Answered 21/10, 2014 at 19:9

Solved javascript html search user-input displayobject

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>

Limacine answered 21/10, 2014 at 18:27 Comment(5)

I am not able to reproduce the "exact match" behavior in your JSFIDDLE which you claim is working....can you give an example of what you searched for when it worked for you..... – Shantelleshantha 21/10, 2014 at 18:35

The embedded code seems to work; "ton" returns both Daulton and Hilton...? – Maegan 21/10, 2014 at 18:38

You just want to give priority to several matching words over fewer? Or Mr. Smoth should should also return John Smith? – Indeed 21/10, 2014 at 18:39

@Shantelleshantha Example: "dy da" will bring up "Andy Daulton" because that string of characters is included in that result. Whereas if you type "andy smith" nothing will come up, even though "andy" is in the result. So it's not looking at keywords individually (which Is what I want), but rather just the exact string that's input. – Limacine 21/10, 2014 at 18:40

@Indeed if "smooth" was a keyword in John Smith's result, then he would come up, but otherwise no. – Limacine 21/10, 2014 at 18:41

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";
            }
        }
    }
}

Raby answered 21/10, 2014 at 19:2 Comment(2)

Ah brilliant! Such a simple fix, thank you! I might even get rid of the "onKeyUp" funcionality to improve user experience so all the results don't show again with the start of each new word </justathought> Thank you! – Limacine 21/10, 2014 at 19:10

I wanted to upvote but didn't want to ruin your 666 reputation :> – Vulturine 14/11, 2018 at 8:50

One further approach, is as follows:

function gid(a_id) {
  return document.getElementById(a_id);
}

function close_all() {

  // applies the Array.prototype.forEach() method to the array-like nodeList
  // returned by document.querySelectorAll() (the string passed to which finds all
  // elements with an id that starts with ('^=') the string 'user_':
  [].forEach.call(document.querySelectorAll('[id^=user_]'), function(div) {
    // 'div' is the array element (the node) itself:
    div.style.display = 'none';
  });

}


function find_my_div() {
  close_all();

  // getting the trimmed lower-cased string from the input element, split
  // on white-space characters to create an array:
  var keywords = gid('edit_search').value.trim().toLowerCase().split(/\s+/),
    // as above, selecting all elements whose id starts with the string 'user_':
    haystack = document.querySelectorAll('[id^="user_"]'),
    // working out whether text is accessed by node.textContent, or node.innerText:
    textProp = 'textContent' in document.body ? 'textContent' : 'innerText',
    // an initialised variable, for later:
    userWords,

    // filters the haystack (the divs whose id starts with 'user_'):
    found = [].filter.call(haystack, function(user) {
      // assigns the lower-cased string to the created-variable:
      userWords = user[textProp].toLowerCase();
      // returns those div elements whose text contains some of
      // the words returned, earlier, as the keywords:
      return keywords.some(function (word) {
        return userWords.indexOf(word) > -1;
      });
    });

  // iterates over the found elements, and shows them:
  [].forEach.call(found, function(user) {
    user.style.display = 'block';
  });

}

<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() {

      [].forEach.call(document.querySelectorAll('[id^=user_]'), function(div) {
        div.style.display = 'none';
      });

    }


    function find_my_div() {
      close_all();
      var keywords = gid('edit_search').value.trim().toLowerCase().split(/\s+/),
        haystack = document.querySelectorAll('[id^="user_"]'),
        textProp = 'textContent' in document.body ? 'textContent' : 'innerText',
        userWords,
        found = [].filter.call(haystack, function(user) {
          userWords = user[textProp].toLowerCase();
          return keywords.some(function (word) {
            return userWords.indexOf(word) > -1;
          });
        });
      console.log(found);
      [].forEach.call(found, function(user) {
        user.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>

References:

CSS:
- Attribute-presence and value selectors.
JavaScript:

Strawser answered 21/10, 2014 at 19:9 Comment(2)

This doesn't work for the given use case ie "mr guy" does not return any results. – Raby 21/10, 2014 at 19:12

@Matt: yes, yes it does... (uh, now anyway...) Thanks! :) – Strawser 21/10, 2014 at 19:16

Recommended topics

Hot tags