Javascript产品搜索（正在运行，但需要按搜索字词过滤）

Question

我有一段产品搜索代码，我一直在努力。它很好，但有点倒退。

我输入的关键字越多，理想情况下产品越少（因为它缩小了结果）。但按照我的观点，在我的搜索系统中输入的关键字越多，就会显示更多产品，因为它会查找具有任何关键字的产品。 我想改变脚本，使其只能说明结果，如果它们包括全部被搜索的关键字，而不是其中的任何...

对不起，啰嗦的解释。

这里的肉和土豆（的jsfiddle）：

http://jsfiddle.net/yk0Lhneg/

HTML：

<input type="text" id="edit_search" onkeyup="find_my_div();"> 
<input type="button" onClick="find_my_div();" value="Find"> 
<div id="product_0" class="name" style="display:none">Mac 
    <br/>Apple 
    <br/> 
    <br/> 
</div> 
<div id="product_1" class="name" style="display:none">PC 
    <br/>Windows 
    <br/> 
    <br/> 
</div> 
<div id="product_2" class="name" style="display:none">Hybrid 
    <br/>Mac PC Apple Windows 
    <br/> 
    <br/> 
</div> 

JAVASCRIPT：

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

function close_all() { 

    for (i = 0; i < 999; i++) { 
     var o = gid("product_" + 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(); 
    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"; 
       } 
      } 
     } 
    } 
} 

所以，当你搜索“MAC电脑“应该的唯一结果被显示的是混合体，因为它具有这两个关键字。并非全部3种产品。

预先感谢您！

Answer 1

我改变了一点点你的代码，以更好地调整我的解决方案。我希望你不介意。你先循环条款，然后通过产品清单，我反过来做。

这个解决方案是如何工作的：

• 导线的产品清单，每个产品：
  • 创建一个计数器，并将其设置为0。
  • 导线搜索词的列表，每个。
    • 如果在产品名称中找到该单词，请将1加到计数器中。
  • 如果计数器有相同的值列表的长度，显示产品（匹配所有的话）

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

 
function close_all() { 
 
    
 
    for (i = 0; i < 999; i++) { 
 
     var o = gid("product_" + 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(); 
 
    var searchStrings = str_needle.split(/\W/); 
 
    
 
    // I moved this loop outside 
 
    var nameDivs = document.getElementsByClassName("name"); 
 
    for (var j = 0, divsLen = nameDivs.length; j < divsLen; j++) { 
 

 
     // set a counter to zero 
 
     var num = 0; 
 

 
     // I moved this loop inside 
 
     for (var i = 0, len = searchStrings.length; i < len; i++) { 
 
      var currentSearch = searchStrings[i].toUpperCase(); 
 
      // only run the search if the text input is not empty (to avoid a blank) 
 
      if (str_needle !== "") { 
 
       // if the term is found, add 1 to the counter 
 
       if (nameDivs[j].textContent.toUpperCase().indexOf(currentSearch) !== -1) { 
 
        num++; 
 
       } 
 
       // display only if all the terms where found 
 
       if (num == searchStrings.length) { 
 
        nameDivs[j].style.display = "block"; 
 
       } 
 
       
 
      } 
 
     } 
 
    } 
 
}

<input type="text" id="edit_search" onkeyup="find_my_div();"> 
 
<input type="button" onClick="find_my_div();" value="Find"> 
 
<div id="product_0" class="name" style="display:none">Mac 
 
    <br/>Apple 
 
    <br/> 
 
    <br/> 
 
</div> 
 
<div id="product_1" class="name" style="display:none">PC 
 
    <br/>Windows 
 
    <br/> 
 
    <br/> 
 
</div> 
 
<div id="product_2" class="name" style="display:none">Hybrid 
 
    <br/>Mac PC Apple Windows 
 
    <br/> 
 
    <br/> 
 
</div>

你也可以看到它这个版本的JSFiddle：http://jsfiddle.net/yk0Lhneg/1/