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 pc”时，应该显示的唯一结果是混合型，因为它具有这两个关键字。不是所有 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/