Xóa tìm kiếm tự động khỏi hộp văn bản và tìm kiếm trên nút tìm kiếm

Question

Tôi đang sử dụng các dữ liệu jQuery và tôi đang cố gắng tìm ra cách tìm kiếm tìm kiếm từ "nút tìm kiếm" và không tự động từ hộp văn bản.

Tôi đang viết một ứng dụng đơn để có nhiều nút gửi khiến việc này trở nên khó khăn vì tôi chỉ muốn tìm kiếm từ nút tìm kiếm cụ thể đó chứ không phải khi gửi để kích hoạt các nút gửi khác.

Tôi googled nó và không có kết quả nào thành công. Làm thế nào để bạn lấy giá trị từ đầu vào khi gửi nút tìm kiếm để điều chỉnh dữ liệu chính xác.

Sau đó, tôi muốn nút tìm kiếm thay đổi văn bản để thoát khỏi tìm kiếm để đặt dữ liệu trở lại trạng thái bình thường như thể bạn vừa xóa văn bản khỏi hộp văn bản. Bất kỳ sự giúp đỡ này sẽ được đánh giá rất nhiều.

JS

// Search Mode allows to search tables 
    $("#Search").on("click",function(){ 
     $("#ItemID").prop("disabled", false); 
     $("#ESearch").show(); 
     $("#Search").hide(); 

     // Allows ItemID to search through database 
     $('#ItemID').keyup(function(){ 
     oTable.search($(this).val()).draw() ; 
     }); 

    }); 

    // Exit out of EXIT SEARCH mode 
    $("#ESearch").on("click",function(){ 
     $("#ItemID").val(""); 
     $("#ItemID").prop("disabled", true); 
     $("#Search").show(); 
     $("#ESearch").hide(); 
    }); 

HTML

<input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="15"> 
<span class="input-group-btn"> 
<button type="button" class="btn btn-default" id="Search">SEARCH</button> 
<button style="display:none;" type="button" class="btn btn-default" id="ESearch">EXIT SEARCH</button> 
</span> 

Answer 1

Không có lý do để thêm một tìm kiếm mới <input>, bạn có thể tái sử dụng mặc định. Mã dưới đây đặt lại tìm kiếm/lọc mặc định xảy ra khi bạn nhập vào hộp <input> mặc định, sau đó thêm hai nút thực hiện/xóa tìm kiếm/lọc khi nhấp.

var table = $('#example').DataTable({ 
    initComplete : function() { 
     var input = $('.dataTables_filter input').unbind(), 
      self = this.api(), 
      $searchButton = $('<button>') 
         .text('search') 
         .click(function() { 
          self.search(input.val()).draw(); 
         }), 
      $clearButton = $('<button>') 
         .text('clear') 
         .click(function() { 
          input.val(''); 
          $searchButton.click(); 
         }) 
     $('.dataTables_filter').append($searchButton, $clearButton); 
    }    
}) 

bản demo ->http://jsfiddle.net/zuv05qbj/

Answer 2

Và như với Davids câu trả lời tuyệt vời, bạn cũng có thể ràng buộc phím ENTER để thực hiện tìm kiếm là tốt, bằng cách gọi các sự kiện nút tìm kiếm nhấp chuột khi nó được nhấn:

initComplete : function() { 
    var self = this.api(); 
    var filter_input = $('#'+settings.nTableWrapper.id+' .dataTables_filter input').unbind(); 
    var search_button = $('<button type="button">Search</button>').click(function() { 
     self.search(filter_input.val()).draw(); 
    }); 
    var clear_button = $('<button type="button">Clear</button>').click(function() { 
     filter_input.val(''); 
     search_button.click(); 
    }); 

    $(document).keypress(function (event) { 
     if (event.which == 13) { 
      search_button.click(); 
     } 
    }); 

    $('#'+settings.nTableWrapper.id+' .dataTables_filter').append(search_button, clear_button); 
} 

trình nếu bạn có nhiều datatables trên trang quá :) (lưu ý việc sử dụng settings.nTableWrapper.id)