简单的搜索功能

最新推荐文章于 2021-10-13 19:12:58 发布

Fade Away

最新推荐文章于 2021-10-13 19:12:58 发布

阅读量444

点赞数

分类专栏： js方法集合

本文链接：https://blog.csdn.net/qq_26239917/article/details/89340680

版权

js方法集合专栏收录该内容

3 篇文章 0 订阅

订阅专栏

知识点1

str.indexOf("") ==> 0; != -1; 就是全选效果
str.indexOf(“content”) != -1 表示在str中，就添加到列表

知识点2 AJAX

知识点3 数组的 forEach

 getData("");
    button.onclick = function () {
        var str = input_search.value;
        getData(str);
    }

    function getData(str) {
        AJAX(
            {
                url: "../static/hero.json",
                data: {
                },
                success: function (obj) {
                    var html = "";
                    obj.forEach(function (item) {
                        if (item.hurt.indexOf(str) != -1 || item.name.indexOf(str) != -1 || item.location.indexOf(str)!= -1) {
                            html += 
                            `<li>
                            <div class="img_box">
                            <img class="img" src="../images/${item.src}" alt="">
                            <div class="msg_box">
                            <p class="name">${item.name}</p>
                            <p class="location">${item.location}</p>
                            <p class="hurt">${item.hurt}</p>
                            </div>
                            </div>
                            </li>`;
                        }
                    });
                    // console.log(html);
                    innerBody.innerHTML = html;
                },
                error: function () {
                }
            }
        );

    }