点击Backspace按钮jQuery过滤器不起作用 [英] on Click of Backspace Button jQuery Filter is not working
问题描述
大家好,
i已经开发了一个基于JSON数据的过滤,当我键入Works Fine(搜索完美)的文本框,但是当我按下后退按钮(e.keyCode == 8) Iam重置所有数据。
-
方案:
如果用户键入( J )2如果用户想要通过按下仅返回按钮来更改名称,则显示2个结果。2必须显示结果而不是所有数据。 / b>
JS:
$(function(){
var data = {
users:[
{
id:01,
docName:Dwayne Johnson,
docCat:神经科医生,
docPic:url('../ images / 01.png')
},
{
id:02,
docName:Vin柴油,
docCat:皮肤专家,
docPic:url('../ images / 02.png')
},
{
id:03,
docName:Paul Walker,
docCat:Specialist,
docPic:url('../ images / 03.png')
,
{
id:04,
docName:Jason Statham,
docCat: 演员,
docPic:url('../ images / 01.png')
},
{
id:05,
docName:Michelle Rodriguez,
docCat:Actress,
docPic:url('../ images / 01.png')
}
]
$(data.users).each(function(){
var output =
< li>+
this.docName + /+
this.docCat +/+
this.docPic
< / li>;
$('#placeholder ul')。append(output);
});
$ b $('#search-doctor')。keyup(function(){
var doctorVal = $(this).val();
if(doctorVal.length> ; 0){
var filterDoctor =
$(li)。filter(function(){
var str = $(this).text();
var re = new RegExp(doctorVal,i);
var result = re.test(str);
if(!result){
return $(this);
}
$($)$ b $(this).keyup(function(e){
if(e.keyCode == 8){
$(li ).show();
}
})
}
else {
$(li)。show();
}
});
))
html:
< input type =searchname =searchid =search-doctorvalue =/>
< div id =placeholder>< ul>< / ul>< / div>
您正在做什么:
$ b $ 显示或隐藏每个
< li>
,具体取决于它们的文本是否与输入值匹配。
$ b $ p var isMatch = $(this).text()。toUpperCase()。indexOf(searchStr)> -1;
$(this) isMatch?show:hide]();
});
或者在上下文中(展开代码段来运行):
var data = {users:[{id:01,docName:Dwayne Johnson,docCat:Neurologist docPic:url('../ images / 01.png')},{id:02,docName:Vin Diesel,docCat:Skin Specialist,docPic: url('../ images / 02.png')},{id:03,docName:Paul Walker,docCat:Specialist,docPic ./images/03.png')},{id:04,docName:Jason Statham,docCat:Actor,docPic:url('../ imag doc:Michelle Rodriguez,docCat:女演员,docPic:url('../ images / 01.png ')}}}; $(function(){$ .each(data.users,function(i,user){var str = [user.docName,user.docCat,user.docPic] .join('/' ); $(< li>,{text:str})。appendTo('#placeholder ul'); }); $('#search-doctor')。keyup(function(){var searchStr = $(this).val()。toUpperCase(); $(#placeholder li)each(function(){var isMatch = $(this).text()。toUpperCase()。indexOf(searchStr)> -1; $(this)[isMatch?show:hide]();});});}); / code>
< script src =https://ajax.googleapis .com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< input type =searchname =searchid =search-doctorvalue = />< div id =placeholder>< ul>< / ul>< / div>
注意:
$ b
- 不要在其他事件处理程序中嵌套事件处理程序,用
keyup
。如果你按10个键,你的代码将创建10个新的键盘处理程序,这当然不是你想到的。 - 使用正则表达式进行模式搜索。避免使用
indexOf
简单的子字符串匹配。
hi all, i have developed an Filtration based on JSON Data, when i type in text box Works Fine (Searches Perfect), but when i press Back Button (e.keyCode == 8) Iam Resetting all the Data.
scenario :
if the User has typed (J) 2 results are displaying which is expected, if the user want to change name by some other word by pressing back button only 2 Results has to be Displayed instead of all the data.
JS :
$(function(){ var data = { "users": [ { "id" : 01, "docName" : "Dwayne Johnson", "docCat" : "Neurologist", "docPic" : "url('../images/01.png')" }, { "id" : 02, "docName" : "Vin Diesel", "docCat" : "Skin Specialist", "docPic" : "url('../images/02.png')" }, { "id" : 03, "docName" : "Paul Walker", "docCat" : "Specialist", "docPic" : "url('../images/03.png')" }, { "id" : 04, "docName" : "Jason Statham", "docCat" : "Actor", "docPic" : "url('../images/01.png')" }, { "id" : 05, "docName" : "Michelle Rodriguez", "docCat" : "Actress", "docPic" : "url('../images/01.png')" } ] } $(data.users).each(function () { var output = "<li>" + this.docName + " / " + this.docCat + " / " + this.docPic "</li>"; $('#placeholder ul').append(output); }); $('#search-doctor').keyup(function () { var doctorVal = $(this).val(); if (doctorVal.length > 0) { var filterDoctor = $("li").filter(function () { var str = $(this).text(); var re = new RegExp(doctorVal, "i"); var result = re.test(str); if (!result) { return $(this); } }).hide(); $(this).keyup(function(e){ if(e.keyCode == 8) { $("li").show(); } }) } else { $("li").show(); } }); })
html :
<input type="search" name="search" id="search-doctor" value="" /> <div id="placeholder"><ul></ul></div>
解决方案What you are trying to do:
"Show or hide each
<li>
, depending on whether their text matches an input value."Let's just write that down:
$("#placeholder li").each(function () { var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1; $(this)[isMatch ? "show" : "hide"](); });
or, in context (expand code snippet to run):
var data = { "users": [ { "id" : 01, "docName" : "Dwayne Johnson", "docCat" : "Neurologist", "docPic" : "url('../images/01.png')" }, { "id" : 02, "docName" : "Vin Diesel", "docCat" : "Skin Specialist", "docPic" : "url('../images/02.png')" }, { "id" : 03, "docName" : "Paul Walker", "docCat" : "Specialist", "docPic" : "url('../images/03.png')" }, { "id" : 04, "docName" : "Jason Statham", "docCat" : "Actor", "docPic" : "url('../images/01.png')" }, { "id" : 05, "docName" : "Michelle Rodriguez", "docCat" : "Actress", "docPic" : "url('../images/01.png')" } ] }; $(function(){ $.each(data.users, function (i, user) { var str = [user.docName, user.docCat, user.docPic].join('/'); $("<li>", {text: str}).appendTo('#placeholder ul'); }); $('#search-doctor').keyup(function () { var searchStr = $(this).val().toUpperCase(); $("#placeholder li").each(function () { var isMatch = $(this).text().toUpperCase().indexOf(searchStr) > -1; $(this)[isMatch ? "show" : "hide"](); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="search" name="search" id="search-doctor" value="" /> <div id="placeholder"><ul></ul></div>
Notes:
- Never nest event handlers inside other event handlers, like you did with
keyup
. If you press 10 keys, your code will create 10 new keyup handlers, this is certainly not what you had in mind. - Use regex for pattern searches. Avoid it for simple substring matches that can easily be accomplished by
indexOf
.
这篇关于点击Backspace按钮jQuery过滤器不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!