按鈕來清除文本和重置搜索輸入不工作

Question

好的，所以我有一個可過濾的搜索表單，返回網格中的某些圖像，這很好，它會重置當我刪除搜索輸入中的文本，但當我點擊「清除」按鈕應該與刪除文本一樣，它不起作用。下面是HTML和JQuery使用：

<form id="live-search" action="" class="styled" method="post" style="margin: 2em 0;"> 
     <div class="form-group"> 
      <input type="text" class="form-control" id="filter" value="" style="width: 80%; float: left;" placeholder="Type to search"/> 
      <span id="filter-count"></span> 
      <input type="button" class="clear-btn" value="Clear" style="background: transparent; border: 2px solid #af2332; color: #af2332; padding: 5px 15px; border-radius: 3px; font-size: 18px; height: 34px;"> 
     </div> 
    </form> 

這是JQuery的用於結算的文字：

jQuery(document).ready(function(){ 
      jQuery("#filter").keyup(function(){ 

          // Retrieve the input field text and reset the count to zero 
          var filter = jQuery(this).val(), count = 0; 

          // Loop through the comment list 
          jQuery(".watcheroo").each(function(){ 

           jQuery(this).removeClass('active'); 

           // If the list item does not contain the text phrase fade it out 
           if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) { 

           jQuery(this).fadeOut(); 

           // Show the list item if the phrase matches and increase the count by 1 
           } else { 

           jQuery(this).show(); 
           count++; 

           } 

           }); 

          // Update the count 
          var numberItems = count; 

        }); 
        //clear button remove text 
        jQuery(".clear-btn").click(function() { 
          jQuery("#filter").value = ""; 

        }); 

    }); 

任何幫助將大大讚賞。

Answer 1

value是一個DOMElement屬性，而不是一個jQuery對象。使用val('')代替：

jQuery(document).ready(function($) { 
    $("#filter").keyup(function() { 
     var filter = $(this).val(), 
      count = 0; 

     $(".watcheroo").each(function(){ 
      var $watcheroo = $(this); 
      $watcheroo.removeClass('active'); 

      if ($watcheroo.text().search(new RegExp(filter, "i")) < 0) { 
       $watcheroo.fadeOut(); 
      } else { 
       $watcheroo.show(); 
       count++; 
      } 
     }); 
     var numberItems = count; 
    }); 

    $(".clear-btn").click(function() { 
     $("#filter").val(''); // <-- note val() here 
    }); 
}); 

請注意，我修改您的代碼以別名的jQuery的實例傳入到的document.ready處理程序。這樣，您仍然可以在該功能的範圍內安全使用$變量。