टेक्स्ट बॉक्स से ऑटो खोज निकालें और खोज बटन पर खोजें

Question

मैं jQuery डेटाटेबल्स का उपयोग कर रहा हूं और मैं यह पता लगाने की कोशिश कर रहा हूं कि "खोज बटन" से मेरी खोज खोज कैसे करें और स्वचालित रूप से टेक्स्टबॉक्स से नहीं।

मैं एक सिंगल पेज एप्लिकेशन लिख रहा हूं इसलिए एक से अधिक सबमिट बटन हैं जो इसे मुश्किल बनाते हैं क्योंकि मैं केवल उस विशिष्ट खोज बटन से खोजना चाहता हूं और अन्य सबमिट बटन को ट्रिगर करने के लिए सबमिट नहीं करना चाहता हूं।

मैंने इसे गुगल किया और कोई भी परिणाम सफल नहीं हुआ। डेटाटेबल को सही तरीके से समायोजित करने के लिए खोज बटन सबमिट करने पर इनपुट से मूल्य कैसे प्राप्त करें।

फिर मैं चाहता हूं कि खोज बटन टेक्स्ट को अपने सामान्य स्थिति में डालने के लिए खोज से बाहर निकलने के लिए टेक्स्ट को बदल दें, जैसे कि आप टेक्स्टबॉक्स से टेक्स्ट को हटाना चाहते थे। इसके लिए कोई भी सहायता अति सराहनीय होगी।

जे एस

// 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(); 
    }); 

एचटीएमएल

<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

वहाँ एक नई खोज <input> जोड़ने के लिए कोई कारण नहीं है, तो आप डिफ़ॉल्ट का पुन: उपयोग कर सकते हैं। नीचे दिया गया कोड डिफ़ॉल्ट खोज/फ़िल्टरिंग को रीसेट करता है जो तब होता है जब आप डिफ़ॉल्ट <input> बॉक्स में टाइप करते हैं, फिर क्लिक पर खोज/फ़िल्टरिंग निष्पादित/साफ़ करने वाले दो बटन जोड़ते हैं।

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); 
    }    
}) 

डेमो ->http://jsfiddle.net/zuv05qbj/

Answer 2

और डेविड्स के साथ के रूप में अद्भुत जवाब है, तुम भी, साथ ही खोज करने के लिए खोज बटन क्लिक करें घटना लागू जब यह दबाया जाता है द्वारा ENTER कुंजी बाध्य कर सकते हैं:

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); 
} 

वर्क्स यदि आप पृष्ठ पर एकाधिक datatables है भी :) (ध्यान दें settings.nTableWrapper.id का उपयोग)