Question

我有一些我一直在研究的产品搜索代码。虽然有点倒退，但效果很好。

我输入的关键字越多，理想情况下，产品会显示的越少（因为它会缩小搜索结果）。但就目前而言，我在搜索系统中输入的关键字越多，就会显示MORE产品，因为它会查找包含任何关键字的任何产品。我想更改脚本，以便 只显示结果，如果它们包含所有搜索到的关键字，而不是其中任何一个...

对于冗长的解释感到抱歉。

这是肉和土豆（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/

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

1 个答案: