jquery - 清除输入字段中的所有字符后，根据输入键过滤元素列表颜色不变

Question

<ul class="locationlist list-unstyled">
<li>
<div class="checkbox checkbox-success">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
Vijayanagar
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox2" class="test" type="checkbox">
<label for="checkbox2">
Indiranagar
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
Rt Nagar
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
Rajajinagar
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox5" type="checkbox">
<label for="checkbox5">
HSR Layout
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
Basavanagudi
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox8" type="checkbox">
<label for="checkbox8">
Marathahalli
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox10" type="checkbox">
<label for="checkbox10">
Malleswaram
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-success">
<input id="checkbox11" type="checkbox">
<label for="checkbox11">
Banashankari
</label>
</div>
</li>
</ul>
<script>
$(document).ready(function(){
     $('.serchfild').keyup(function(){
    var value = $(this).val();
    $("ul.locationlist > li .checkbox label").each(function() {
        if ($(this).text().search(new RegExp(value, "i")) > -1) {

            $(this).parents('.checkbox').show();
            if($(this).text().search(new RegExp(value, "i"))){
                $(this).css('color','red');
            }

        }
        else {
            $(this).parents('li').hide();
        }

    }); });
});

清除输入字段中的所有字符后，基于输入键过滤元素列表颜色不变，如果我按输入字段字符中的一个字符，则只有一个字符必须更改颜色，如果清除输入字段，则显示所有 li 的 Fiddle link

Answer 1

您好，请检查我创建的 https://plnkr.co/edit/NH46zMCztCnOO6qpoGC9?p=preview

HTML

    <input type="text" id="search-dinosaurs" placeholder="Search for Dinosaurs (start typing)" />

<ul id="dino-list">
  <li>Diplodocus</li>
  <li>Stegosaurus</li>
  <li>Triceratops</li>
  <li>Pteradactyl</li>
  <li>Tyrannosaurus Rex</li>
  <li>Protoceratops</li>
  <li>Iguanadon</li>
  <li>Velociraptor</li>
</ul>

和JS

$(document).ready(function () {

    /* initially hide product list items */


    /* highlight matches text */
    var highlight = function (string) {
        $("#dino-list li.match").each(function () {
            var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + "");
            var matchEnd = matchStart + string.length - 1;
            var beforeMatch = $(this).text().slice(0, matchStart);
            var matchText = $(this).text().slice(matchStart, matchEnd + 1);
            var afterMatch = $(this).text().slice(matchEnd + 1);
            $(this).html(beforeMatch + "<em>" + matchText + "</em>" + afterMatch);
        });
    };


    /* filter products */
    $("#search-dinosaurs").on("keyup click input", function () {

        if (this.value.length > 0) {
            $("#dino-list li").removeClass("match").hide().filter(function () {
                return $(this).text().toLowerCase().indexOf($("#search-dinosaurs").val().toLowerCase()) != -1;
            }).addClass("match").show();
            highlight(this.value);
            $("#dino-list").show();
        }
        else {

           //$("#dino-list, #dino-list li").removeClass("match").hide();
          $("#dino-list, #dino-list li").removeClass("match");
          $("#dino-list, #dino-list li").show();
           $("#dino-list li").removeClass("match").hide().filter(function () {
                return $(this).text().toLowerCase().indexOf($("#search-dinosaurs").val().toLowerCase()) != -1;
            }).addClass("match").show();
            highlight(this.value);
        }
    });


});

和 CSS

input[type=text]{
  width:200px;
  padding:8px 10px;
}

li em {
  background:#ff6;
  font-weight:bold;
  font-style:normal;
}