Javascript search and display divs with matching keywords

Question

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 resul

Answer 1

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';
  });

}

  
  

  

  
Andy Daulton
    
Owner Nissan
    

    

  
  
Doug Guy
    
Bug Collector
    

    

  
  
Sam Hilton
    
Famous Celebrity in Hollywood
    

    

  
  
Don Grey
    
Old man
    

    

  
  
Amy Hinterly
    
Cook
    

    

  
  
Gary Doll
    
Racecar Driver
    

    

  
  
Tod Akers
    
Football Player
    

    

  
  
Greg Barkley
    
Interior designer
    

    

  
  
Alen Simmons
    
8th place winner
    

    

  

References:

• CSS:
  • Attribute-presence and value selectors.
• JavaScript:
  • Array.prototype.every().
  • Array.prototype.filter().
  • Array.prototype.forEach().
  • Array.prototype.some().
  • document.querySelectorAll().
  • Function.prototype.call().
  • String.prototype.indexOf()