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/