[英]filter list of items based on input keyup after clear all the charectors in the input field color not changing
<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();
}
}); });
});
清除输入字段中所有字符的颜色不变后,基于输入键过滤项目列表。如果我在输入filde charector中按一个字符,则只有一个字符必须更改颜色;如果清除输入fild,则显示li的所有Fiddle链接
嗨,请检查我创建的https://plnkr.co/edit/NH46zMCztCnOO6qpoGC9?p=preview
HTM1
<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);
}
});
});
和CS
input[type=text]{
width:200px;
padding:8px 10px;
}
li em {
background:#ff6;
font-weight:bold;
font-style:normal;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.