Javascript 产品搜索（工作，但需要按搜索词过滤）

Question

I have a little product search code that I've been working on for a while. It works great, although a bit backwards.

The more keywords I type in, ideally, the less products will show up (because it narrows down the results). But as is stands, the more keywords I type in my search system, the MORE products are displayed, because it looks for any product with any of the keywords. I want to change the script so that it only shows results if they include ALL the searched for keywords, not ANY of them...

Sorry for the long-winded explanation.

Here's the meat and potatoes (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";
                }
            }
        }
    }
}

So, when you search "mac pc" the only result that should be displayed is the hybrid, because it has both of those keywords. Not all 3 products.

Thank you in advance!

Answer 1

I changed a little bit your code to adjust it better to my solution. I hope you don't mind. You loop first over the terms, and then through the list of products, I do it the other way around.

How this solution works:

• Traverse the list of products, for each product:
  • Create a counter and set it to 0.
  • Traverse the list of search terms, for each.
    • If the word is found in the product's name, add 1 to the counter.
  • If the counter has the same value as the list length, display the product (matched all words)

 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>

You can also see it on this version of your JSFiddle: http://jsfiddle.net/yk0Lhneg/1/