点击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 简单的子字符串匹配。
  
  

  DEMO HERE

  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屋！