# js，根據input框內容實時搜索列表,並添加底色以突出顯示

js，根據input框內容實時搜索列表,並添加底色以突出顯示

js，根據input框內容實時搜索列表，純前端，下面分三個部分進行展示：

• 首先，讓我們看一下做出來的效果：

• 1.html代碼
• 2.js代碼
• 3.css樣式

---

1.html代碼

<li>
<label>名稱：</label>
    <input type="text" id="selectByName" name="selectByName" value="" placeholder="請輸入名稱搜索......"/>
    <p>
        <a href="javascript:void(0);" class="selectCity-all">全部</a>
        <a href="javascript:void(0);" class="selectCity" value="xzz">小豬豬</a>
        <a href="javascript:void(0);" class="selectCity" value="glxq">咖喱小氣</a>
        <a href="javascript:void(0);" class="selectCity" value="qtds">齊天大聖</a>
        <a href="javascript:void(0);" class="selectCity" value="mm">發抖的小喵咪</a>
    </p>
</li>

2.js代碼

//綁定搜索框搜索事件
$(“body”).undelegate(“#selectByName”,”keyup”).delegate(“#selectByName”,”keyup”,function() {

        var theName = $(this).val().replace(/\s+/g, "");
        if (theName .length > 0) {//theName .length > 0 代表輸入了theName值
            //遍歷要搜索的列表
            $(this).next().find(".selectCity").each(function () {
                if ($(this).html().indexOf(theName) > -1) {
                    //如果包含搜索內容，則添加底色樣式
                    $(this).addClass("sousuo");
                } else {
                    $(this).removeClass("sousuo");
                }
            });
        }else {//否則 代表沒輸入theName值，全部去除底色
            $(this).next().find(".selectCity").each(function () {
                $(this).removeClass("sousuo");
            });
        }
    });

3.css樣式

.selectCity{
//空樣式，只用來標記行
}
.sousuo{
background-color: #1bffed;
}

“全部”功能這裏先不說，以後有時間會再跟大家分享！