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> 

注意：
$ 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.