blocks|key|943175|text|你可能不得不修改这个插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943176|不是让它变成X个字符，而是使用延迟，这样一旦他们停止键入1秒左右，搜索就开始了。|943177|因此，当前触发搜索的keydown/keyup绑定将使用计时器进行修改...|943178|var+timer;
clearTimeout(timer);
timer+=+setTimeout(searchFunctionName,+1000+/*+timeToWaitInMS+*/);|code-block|syntax|javascript|943179|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You'll probably have to modify the plugin.

And instead of making it X characters, use a delay, so the search starts once they stopped typing for 1 second or so.

So the keydown/keyup binding which is currently triggering the search would be modified with a timer...

<pre><code>var timer;
clearTimeout(timer);
timer = setTimeout(searchFunctionName, 1000 /* timeToWaitInMS */);
</code></pre>

blocks|key|943269|text|有没有什么原因你不在“change”上检查长度？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943270|$('.input').change(function()+{
++if(+$('.input').length+>+3+)+{
+++++//do+the+search
++}
});|code-block|syntax|javascript|943271|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Is there a reason you wouldn't just check length on 'change'?

<pre><code>$('.input').change(function() {
 if( $('.input').length &gt; 3 ) {
 //do the search
 }
});
</code></pre>

blocks|key|943341|text|您需要修改jquery.datatables.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943342|-更新当然你可以检查长度>+3，但我认为你仍然需要一个计时器。如果你有大量的数据，你不想在每次字符更新后都对其进行过滤。|943343|在此方法中：|943344|jqFilter.keyup(+function(e)+{
++++++++++++if+(+**this.value**.length+>+3)+{
++++++++++++++++var+n+=+oSettings.aanFeatures.f;
++++++++++++++++for+(+var+i=0,+iLen=n.length+;+i<iLen+;+i%2B%2B+)
++++++++++++++++{
++++++++++++++++++++if+(+n[i]+!=+this.parentNode+)
++++++++++++++++++++{
++++++++++++++++++++++++$('input',+n[i]).val(+this.value+);
++++++++++++++++++++}
++++++++++++++++}
++++++++++++++++/*+Now+do+the+filter+*/
++++++++++++++++_fnFilterComplete(+oSettings,+{+
++++++++++++++++++++"sSearch":+this.value,+
++++++++++++++++++++"bRegex":++oSettings.oPreviousSearch.bRegex,
++++++++++++++++++++"bSmart":++oSettings.oPreviousSearch.bSmart+
++++++++++++++++}+);
+++++++++}
++++++++}+);|code-block|syntax|javascript|943345|向keyup添加一个计时器，如其中一个答案所示。|943346|然后转到此站点http://jscompress.com/|offset|length|943347|经过修改后的代码，js就会变得很小。|943348|entityMap|0|LINK|mutability|MUTABLE|url|http://jscompress.com/^0|0|0|0|0|0|7|M|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

You need to modify the jquery.datatables.js

----- updated
ofcourse you can do a check on lenght > 3, but I think you still need a timer. if you have a lot of data, you don't want to keep getting it filtered after every character update. 

Within this method: 

<pre><code>jqFilter.keyup( function(e) {
 if ( **this.value**.length &gt; 3) {
 var n = oSettings.aanFeatures.f;
 for ( var i=0, iLen=n.length ; i&lt;iLen ; i++ )
 {
 if ( n[i] != this.parentNode )
 {
 $('input', n[i]).val( this.value );
 }
 }
 /* Now do the filter */
 _fnFilterComplete( oSettings, { 
 "sSearch": this.value, 
 "bRegex": oSettings.oPreviousSearch.bRegex,
 "bSmart": oSettings.oPreviousSearch.bSmart 
 } );
 }
 } );
</code></pre>

Add a timer to the keyup, like shown in one of the answers.

Then go to this site <a href="http://jscompress.com/" rel="nofollow">http://jscompress.com/</a>

And past your modified code and the js wil get minified.

blocks|key|943470|text|为什么不试试Stony's答案的这个扩展版本:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943471|var+searchWait+=+0;
var+searchWaitInterval;
$('.dataTables_filter+input')
.unbind('keypress+keyup')
.bind('keypress+keyup',+function(e){
++++var+item+=+$(this);
++++searchWait+=+0;
++++if(!searchWaitInterval)+searchWaitInterval+=+setInterval(function(){
++++++++if(searchWait>=3){
++++++++++++clearInterval(searchWaitInterval);
++++++++++++searchWaitInterval+=+'';
++++++++++++searchTerm+=+$(item).val();
++++++++++++oTable.fnFilter(searchTerm);
++++++++++++searchWait+=+0;
++++++++}
++++++++searchWait%2B%2B;
++++},200);

});|code-block|syntax|javascript|943472|这将延迟搜索，直到用户停止键入。|943473|希望能有所帮助。|943474|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Why not try this extended version of Stony's answer :)

<pre><code>var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
 var item = $(this);
 searchWait = 0;
 if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
 if(searchWait&gt;=3){
 clearInterval(searchWaitInterval);
 searchWaitInterval = '';
 searchTerm = $(item).val();
 oTable.fnFilter(searchTerm);
 searchWait = 0;
 }
 searchWait++;
 },200);

});
</code></pre>

This will delay the search until the user has stopped typing.

Hope it helps.

blocks|key|943564|text|这是一个类似插件的脚本，它扩展了数据表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943565|jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress+=+function+(+oSettings+)+{
++++var+_that+=+this;

++++this.each(+function+(+i+)+{
++++++++$.fn.dataTableExt.iApiIndex+=+i;
++++++++var
++++++++++++$this+=+this,+
++++++++++++oTimerId+=+null,+
++++++++++++sPreviousSearch+=+null,
++++++++++++anControl+=+$(+'input',+_that.fnSettings().aanFeatures.f+);

++++++++++++anControl
++++++++++++++.unbind(+'keyup'+)
++++++++++++++.bind(+'keyup',+function(e)+{

++++++++++++++if+(+anControl.val().length+>+2+&&+e.keyCode+==+13){
++++++++++++++++_that.fnFilter(+anControl.val()+);
++++++++++++++}
++++++++});

++++++++return+this;
++++}+);
++++return+this;
}|code-block|syntax|javascript|943566|用法：|943567|$('#table').dataTable().fnSetFilteringEnterPress();|943568|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here's a plugin-like script that extends datatables.

<pre><code>jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
 var _that = this;

 this.each( function ( i ) {
 $.fn.dataTableExt.iApiIndex = i;
 var
 $this = this, 
 oTimerId = null, 
 sPreviousSearch = null,
 anControl = $( 'input', _that.fnSettings().aanFeatures.f );

 anControl
 .unbind( 'keyup' )
 .bind( 'keyup', function(e) {

 if ( anControl.val().length &gt; 2 &amp;&amp; e.keyCode == 13){
 _that.fnFilter( anControl.val() );
 }
 });

 return this;
 } );
 return this;
}
</code></pre>

usage:

<pre><code>$('#table').dataTable().fnSetFilteringEnterPress();
</code></pre>

blocks|key|727432|text|使用这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|727433|+++"fnServerData":+function+(sSource,+aoData,+fnCallback,+oSettings)+{

++++++++++++if+($("#myDataTable_filter+input").val()+!==+""+&&+$("#myDataTable_filter+input").val().length+<+3)
++++++++++++++++return;
++++++++++++oSettings.jqXHR+=+$.ajax({
++++++++++++++++"dataType":+'json',
++++++++++++++++"timeout":12000,
++++++++++++++++"type":+"POST",
++++++++++++++++"url":+sSource,
++++++++++++++++"data":+aoData,
++++++++++++++++"success":+fnCallback
++++++++++++});
++++++++}|code-block|syntax|javascript|727434|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use this

<pre><code> "fnServerData": function (sSource, aoData, fnCallback, oSettings) {

 if ($("#myDataTable_filter input").val() !== "" &amp;&amp; $("#myDataTable_filter input").val().length &lt; 3)
 return;
 oSettings.jqXHR = $.ajax({
 "dataType": 'json',
 "timeout":12000,
 "type": "POST",
 "url": sSource,
 "data": aoData,
 "success": fnCallback
 });
 }
</code></pre>

blocks|key|943647|text|尽管它没有回答最初的问题，但我在我的数据表上进行了一次复杂而缓慢的搜索。filter事件是在每次按键后触发的，这意味着在10个字符之后会有相当明显的延迟。因此，通过在filter事件触发之前的按键之后引入一个短暂的延迟，随后的按键将重置计数器并阻止前一次搜索，我能够使搜索看起来更快。其他人可能会发现这很有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943648|我使用了stony和christian+noel的答案来做这个：|943649|var+dataTableFilterTimeout;
var+dataTableFilterWait+=+200;+//+number+of+milliseconds+to+wait+before+firing+filter

$.fn.dataTableExt.oApi.fnSetFilteringEnterPress+=+function+(+oSettings+)+{
++++var+_that+=+this;
++++this.each(+function+(+i+)+{
++++++++$.fn.dataTableExt.iApiIndex+=+i;
++++++++var+$this+=+this;
++++++++var+oTimerId+=+null;
++++++++var+sPreviousSearch+=+null;
++++++++anControl+=+$(+'input',+_that.fnSettings().aanFeatures.f+);
++++++++anControl.unbind(+'keyup'+).bind(+'keyup',+function(e)+{
++++++++++++window.clearTimeout(dataTableFilterTimeout);
++++++++++++if+(+anControl.val().length+>+2+%7C%7C+e.keyCode+==+13){
++++++++++++++++dataTableFilterTimeout+=+setTimeout(function(){
++++++++++++++++++++_that.fnFilter(+anControl.val()+);
++++++++++++++++},dataTableFilterWait);
++++++++++++}
++++++++});
++++++++return+this;
++++}+);
++++return+this;
}|code-block|syntax|javascript|943650|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

although it does not answer the original question, i had a complex and slow search on my datatables. the filter event was firing after each keypress, which meant a quite noticeable delay after 10 characters. so by introducing a short delay after a keypress before the filter event was fired, where a subsequent keypress reset the counter and prevented the previous search, i was able to make the search seem much faster. others may find this helpful.

i used the answers from stony and christian noel to make this:

<pre><code>var dataTableFilterTimeout;
var dataTableFilterWait = 200; // number of milliseconds to wait before firing filter

$.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
 var _that = this;
 this.each( function ( i ) {
 $.fn.dataTableExt.iApiIndex = i;
 var $this = this;
 var oTimerId = null;
 var sPreviousSearch = null;
 anControl = $( 'input', _that.fnSettings().aanFeatures.f );
 anControl.unbind( 'keyup' ).bind( 'keyup', function(e) {
 window.clearTimeout(dataTableFilterTimeout);
 if ( anControl.val().length &gt; 2 || e.keyCode == 13){
 dataTableFilterTimeout = setTimeout(function(){
 _that.fnFilter( anControl.val() );
 },dataTableFilterWait);
 }
 });
 return this;
 } );
 return this;
}
</code></pre>

blocks|key|943695|text|下面是如何在1.10版本中处理api更改的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|943696|var+searchbox+=+$('#promogrid_filter+input');
var+pgrid+=+$('#promogrid').DataTable();

//Remove+default+datatable+logic+tied+to+these+events
searchbox.unbind();

searchbox.bind('input',+function+(e)+{
+++if(this.value.length+>=+3)+{
++++++pgrid.search(this.value).draw();
+++}
+++if(this.value+==+'')+{
++++++pgrid.search('').draw();
+++}
+++return;
});|code-block|syntax|javascript|943697|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is how to handle it with the api change in version 1.10

<pre><code>var searchbox = $('#promogrid_filter input');
var pgrid = $('#promogrid').DataTable();

//Remove default datatable logic tied to these events
searchbox.unbind();

searchbox.bind('input', function (e) {
 if(this.value.length &gt;= 3) {
 pgrid.search(this.value).draw();
 }
 if(this.value == '') {
 pgrid.search('').draw();
 }
 return;
});
</code></pre>

blocks|key|727657|text|版本1.10的解决方案-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|727658|在这里寻找了一个完整的答案但没有找到之后，我写了这个(利用文档中的代码，以及这里的一些答案)。|727659|以下代码用于延迟搜索，直到至少输入3个字符：|727660|//+Call+datatables,+and+return+the+API+to+the+variable+for+use+in+our+code
//+Binds+datatables+to+all+elements+with+a+class+of+datatable
var+dtable+=+$(".datatable").dataTable().api();

//+Grab+the+datatables+input+box+and+alter+how+it+is+bound+to+events
$(".dataTables_filter+input")
++++.unbind()+//+Unbind+previous+default+bindings
++++.bind("input",+function(e)+{+//+Bind+our+desired+behavior
++++++++//+If+the+length+is+3+or+more+characters,+or+the+user+pressed+ENTER,+search
++++++++if(this.value.length+>=+3+%7C%7C+e.keyCode+==+13)+{
++++++++++++//+Call+the+API+search+function
++++++++++++dtable.search(this.value).draw();
++++++++}
++++++++//+Ensure+we+clear+the+search+if+they+backspace+far+enough
++++++++if(this.value+==+"")+{
++++++++++++dtable.search("").draw();
++++++++}
++++++++return;
++++});|code-block|syntax|javascript|727661|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Solution for version 1.10 -

After looking here for a complete answer and not finding one, I've written this (utilizing code from the documentation, and a few answers here).

The below code works to delay searching until at least 3 characters are entered:

<pre><code>// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
var dtable = $(".datatable").dataTable().api();

// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
 .unbind() // Unbind previous default bindings
 .bind("input", function(e) { // Bind our desired behavior
 // If the length is 3 or more characters, or the user pressed ENTER, search
 if(this.value.length &gt;= 3 || e.keyCode == 13) {
 // Call the API search function
 dtable.search(this.value).draw();
 }
 // Ensure we clear the search if they backspace far enough
 if(this.value == "") {
 dtable.search("").draw();
 }
 return;
 });
</code></pre>

blocks|key|727697|text|这适用于DataTables+1.10.4：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|727698|var+table+=+$('#example').DataTable();

$(".dataTables_filter+input")
++++.unbind()
++++.bind('keyup+change',+function(e)+{
++++++++if+(e.keyCode+==+13+%7C%7C+this.value+==+"")+{
++++++++++++table
++++++++++++++++.search(this.value)
++++++++++++++++.draw();
++++++++}
++++});|code-block|syntax|javascript|727699|JSFiddle|offset|length|727700|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/marciosouzajunior/71yukww8/2/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This works on DataTables 1.10.4:

<pre><code>var table = $('#example').DataTable();

$(".dataTables_filter input")
 .unbind()
 .bind('keyup change', function(e) {
 if (e.keyCode == 13 || this.value == "") {
 table
 .search(this.value)
 .draw();
 }
 });
</code></pre>

<a href="http://jsfiddle.net/marciosouzajunior/71yukww8/2/" rel="nofollow noreferrer">JSFiddle</a>

blocks|key|727770|text|您可以通过以下方式延迟对服务器的ajax调用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|727771|var+search_thread+=+null;
++++$(".dataTables_filter+input")
++++++++.unbind()
++++++++.bind("input",+function(e)+{+
++++++++++++clearTimeout(search_thread);
++++++++++++search_thread+=+setTimeout(function(){
++++++++++++++++var+dtable+=+$("#list_table").dataTable().api();
++++++++++++++++var+elem+=+$(".dataTables_filter+input");
++++++++++++++++return+dtable.search($(elem).val()).draw();
++++++++++++},+300);
++++++++});|code-block|syntax|javascript|727772|如果按键之间的时间间隔小于300ms，则此代码将停止ajax调用，这样，当您写一个单词时，只会运行一个ajax调用，而且只有当您停止键入时才会运行。你可以使用延迟参数(+300)来获得或多或少的延迟|727773|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can delay the ajax call to the server by this

<pre><code>var search_thread = null;
 $(".dataTables_filter input")
 .unbind()
 .bind("input", function(e) { 
 clearTimeout(search_thread);
 search_thread = setTimeout(function(){
 var dtable = $("#list_table").dataTable().api();
 var elem = $(".dataTables_filter input");
 return dtable.search($(elem).val()).draw();
 }, 300);
 });
</code></pre>

This code will stop the ajax call if the time between to key press is less then 300 ms, in that way when you write a word, only one ajax call will run and only when you stop typing.
You can 'play' with the delay param ( the 300) in order to get more or less delay

blocks|key|727819|text|您可以按名称minlength使用参数，以便将搜索限制为3个字符：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|727820|function(request,+response)+{
++++$.getJSON("/speakers/autocomplete",+{++
++++++++q:+$('#keywordSearch').val()
++++},+response);
},+minLength:+3|code-block|syntax|javascript|727821|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use the parameter by name minlength in order to restrict the search until 3 characters:

<pre><code>function(request, response) {
 $.getJSON("/speakers/autocomplete", { 
 q: $('#keywordSearch').val()
 }, response);
}, minLength: 3
</code></pre>

blocks|key|944006|text|对于1.10版本，在选项中将此代码添加到您的javascript。initComplete覆盖搜索方法，并等待写入3个字符。感谢http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/给了我光明。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|944007|++++var+dtable=+$('#example').DataTable(+{
++++++++"deferRender":+true,
++++++++"processing":+true,
++++++++"serverSide":+true,


++++++++"ajax":+"get_data.php",
++++++++"initComplete":+function()+{
++++++++++++var+$searchInput+=+$('div.dataTables_filter+input');

++++++++++++$searchInput.unbind();

++++++++++++$searchInput.bind('keyup',+function(e)+{
++++++++++++++++if(this.value.length+>+3)+{
++++++++++++++++++++dtable.search(+this.value+).draw();
++++++++++++++++}
++++++++++++});
++++++++}

++++}+);
}+);|code-block|syntax|javascript|944008|entityMap|0|LINK|mutability|MUTABLE|url|http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/^0|1S|28|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

for 1.10 version add this code to your javascript in the options.
The initComplete overrides the search method and wait to 3 characters are written.
Thanks to <a href="http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/" rel="nofollow">http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/</a> for giving me the light.

<pre><code> var dtable= $('#example').DataTable( {
 "deferRender": true,
 "processing": true,
 "serverSide": true,


 "ajax": "get_data.php",
 "initComplete": function() {
 var $searchInput = $('div.dataTables_filter input');

 $searchInput.unbind();

 $searchInput.bind('keyup', function(e) {
 if(this.value.length &gt; 3) {
 dtable.search( this.value ).draw();
 }
 });
 }

 } );
} );
</code></pre>

blocks|key|944068|text|我的datatables+1.10.10版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944069|我做了一些小改动，现在它起作用了。所以，我要分享，因为很难让它在1.10.10版本中工作。感谢cale_b，Stony和Sam+Barnes。看看代码，看看我做了什么。|944070|++++var+searchWait+=+0;
++++var+searchWaitInterval;
++++$('.dataTables_filter+input')
++++.unbind()+//+leave+empty+here
++++.bind('input',+function(e){+//leave+input
++++++++var+item+=+$(this);
++++++++searchWait+=+0;
++++++++if(!searchWaitInterval)+searchWaitInterval+=+setInterval(function(){
++++++++++++if(searchWait+>=+3){
++++++++++++++++clearInterval(searchWaitInterval);
++++++++++++++++searchWaitInterval+=+'';
++++++++++++++++searchTerm+=+$(item).val();
++++++++++++++++oTable.search(searchTerm).draw();+//+change+to+new+api
++++++++++++++++searchWait+=+0;
++++++++++++}
++++++++++++searchWait%2B%2B;
++++++++},200);

++++});|code-block|syntax|javascript|944071|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

My version of datatables 1.10.10

I changed a little things and it works now. So, i'm sharing, cause it was difficulty to make it work for version 1.10.10. Thanks to cale_b, Stony and Sam Barnes. Look at the code to see what i did.

<pre><code> var searchWait = 0;
 var searchWaitInterval;
 $('.dataTables_filter input')
 .unbind() // leave empty here
 .bind('input', function(e){ //leave input
 var item = $(this);
 searchWait = 0;
 if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
 if(searchWait &gt;= 3){
 clearInterval(searchWaitInterval);
 searchWaitInterval = '';
 searchTerm = $(item).val();
 oTable.search(searchTerm).draw(); // change to new api
 searchWait = 0;
 }
 searchWait++;
 },200);

 });
</code></pre>

blocks|key|944138|text|您可以使用data.currentTarget.value.length获取传入的数据的长度，请参见下面的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944139|$('[id$="Search"]').keyup(function+(data)+{
++++++++++++if+(data.currentTarget.value.length+>+2+%7C%7C+data.currentTarget.value.length+==+0)+{
++++++++++++++++if+(timoutOut)+{+clearTimeout(timoutOut);+}
++++++++++++++++timoutOut+=+setTimeout(function+()+{
++++++++++++++++++++var+value+=+$('[id$="Search"]').val();
++++++++++++++++++++$('#jstree').jstree(true).search(value);
++++++++++++++++},+250);
++++++++++++}
++++++++});|code-block|syntax|javascript|944140|显然，您希望在删除文本时运行此代码，因此将值设置为0|944141|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can get the length of the data that is being passed in using data.currentTarget.value.length, please see below.

<pre><code>$('[id$="Search"]').keyup(function (data) {
 if (data.currentTarget.value.length &gt; 2 || data.currentTarget.value.length == 0) {
 if (timoutOut) { clearTimeout(timoutOut); }
 timoutOut = setTimeout(function () {
 var value = $('[id$="Search"]').val();
 $('#jstree').jstree(true).search(value);
 }, 250);
 }
 });
</code></pre>

and obviously you would want this code to run when removing text so set the value to 0

blocks|key|728099|text|修复了datatables+1.10.12版本，使用API并正确地解除了'input‘的绑定。还添加了字符限制下的退格键的搜索清除。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|728100|++++//+Create+the+Datatable
++++var+pTable+=+$('#pTable').DataTable();

++++//+Get+the+Datatable+input+box+and+alter+events
++++$('.dataTables_filter+input')
++++.unbind('keypress+keyup+input')
++++.bind('keypress+keyup+input',+function+(e)+{
++++++++if+($(this).val().length+>+2)+{
++++++++++++pTable.search(this.value).draw();
++++++++}+else+if+(($(this).val().length+==+2)+&&+(e.keyCode+==+8))+{
++++++++++++pTable.search('').draw();
++++++++}
++++});|code-block|syntax|javascript|728101|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Fixed version for datatables 1.10.12 using API and correctly unbinding the 'input'. Also added search clear on backspace under the character limit.

<pre><code> // Create the Datatable
 var pTable = $('#pTable').DataTable();

 // Get the Datatable input box and alter events
 $('.dataTables_filter input')
 .unbind('keypress keyup input')
 .bind('keypress keyup input', function (e) {
 if ($(this).val().length &gt; 2) {
 pTable.search(this.value).draw();
 } else if (($(this).val().length == 2) &amp;&amp; (e.keyCode == 8)) {
 pTable.search('').draw();
 }
 });
</code></pre>

blocks|key|944240|text|如果您使用的是旧版本，它看起来就像是旧版本。Richard的解决方案运行良好。但当我使用它时，我只是添加了新的事件，而不是删除。因为当代码运行时，表还没有创建。因此，我发现有fnInitComplete方法(创建表时触发)，并将其应用于Ricard的解决方案。就是这里|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944241|$("#my_table").dataTable(+{
++++++++"bJQueryUI":+true,
++++++++"sPaginationType":+"full_numbers",
++++++++"bAutoWidth":+false,
+++++++++...
+++++++++...,
+++++++++"fnInitComplete":+function+(oSettings,+json)+{
++++++++++++++++++++var+activeDataTable+=+$(this).DataTable();
++++++++++++++++++++$("#my_table_filter+input")
++++++++++++++++++++++++.unbind('keypress+keyup')
++++++++++++++++++++++++.bind('keypress+keyup',+function+(e)+{

++++++++++++++++++++++++if+($(this).val().length+<+3+%7C%7C+e.keyCode+!==+13)+return;
++++++++++++++++++++++++activeDataTable.fnFilter($(this).val());
++++++++++++++++++++});
++++++++++++++++}|code-block|syntax|javascript|944242|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you're using the old version, it looks like it. Richard's solution works fine. 
But when I use it, I just added new events, not deleting. Because when code run, table is not yet created.
So I found that there is the fnInitComplete method (fire when table created) and I applied it to Ricard's solution.
Here it is

<pre><code>$("#my_table").dataTable( {
 "bJQueryUI": true,
 "sPaginationType": "full_numbers",
 "bAutoWidth": false,
 ...
 ...,
 "fnInitComplete": function (oSettings, json) {
 var activeDataTable = $(this).DataTable();
 $("#my_table_filter input")
 .unbind('keypress keyup')
 .bind('keypress keyup', function (e) {

 if ($(this).val().length &lt; 3 || e.keyCode !== 13) return;
 activeDataTable.fnFilter($(this).val());
 });
 }
</code></pre>

blocks|key|944281|text|您可以在Medtronic+datatable上使用此代码或其他代码在使用3个字符后进行搜索：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|944282|++++++++onDataLoad:+function+(RequestGrid)+{
++++++++++++//+execute+some+code+on+ajax+data+load
++++++++++++var+searchInput+=+$('div.dataTables_filter+input').val();
++++++++++++if+(searchInput.length()+>+3+%7C%7C+searchInput.length()+==0)+{
++++++++++++++++alert(searchInput);
++++++++++++++++dt.draw();
++++++++++++}
++++++++++++else+{
++++++++++++++++return+false;
++++++++++++}
++++++++},|code-block|syntax|javascript|944283|第一个节目的searchInput.length()+==0。|944284|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can use this code on Medtronic datatable or other code to search after using 3 character :

<pre><code> onDataLoad: function (RequestGrid) {
 // execute some code on ajax data load
 var searchInput = $('div.dataTables_filter input').val();
 if (searchInput.length() &gt; 3 || searchInput.length() ==0) {
 alert(searchInput);
 dt.draw();
 }
 else {
 return false;
 }
 },
</code></pre>

searchInput.length() ==0 for first show.

blocks|key|728213|text|这适用于DataTables版本1.10.19。它只需要在您的网站模板中包含js+-对于在不同页面上配置了多个dataTables的网站非常有用。对于任何缓慢的xhr加载表也很有用，在所有当前运行的表完成之前，不允许任何新的xhr请求。使用的搜索功能与插件最初设置search+function的方式非常相似。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|728214|(function(window,+document,+$){
var+xhring+=+0;

$(document).on(+'preXhr.dt',+function+()+{
++++xhring%2B%2B;
}+);
$(document).on(+'xhr.dt',+function+()+{
++++xhring--;
}+);

//at+a+minimum+wait+the+full+freq,+and+wait+for+any+pending+XHR+requests+to+finish+before+calling+fn
function+choke(+fn,+freq+)+{
++++var
++++++++frequency+=+freq+!==+undefined+?+freq+:+200,
++++++++last,
++++++++timerFn,
++++++++timer;

++++return+function+()+{
++++++++var
++++++++++++that+=+this,
++++++++++++args+=+arguments;

++++++++timerFn+=+function+()+{
++++++++++++if+(xhring+%7C%7C+%2Bnew+Date()+<+last+%2B+frequency)+{
++++++++++++++++clearTimeout(+timer+);
++++++++++++++++timer+=+setTimeout(+timerFn,+frequency);
++++++++++++}+else+{
++++++++++++++++fn.apply(+that,+args+);
++++++++++++}
++++++++}
++++++++last+=+%2Bnew+Date();

++++++++clearTimeout(+timer+);
++++++++timer+=+setTimeout(+timerFn,+frequency+);
++++};
}

//See+https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js
//See+https://github.com/DataTables/Plugins/blob/master/features/searchHighlight/dataTables.searchHighlight.js
$(document).on(+'preInit.dt',+function+(e,+settings,+json)+{
++++var+previousSearch+=+settings.oPreviousSearch;

++++var+searchFn+=+function()+{
++++++++/*+Update+all+other+filter+input+elements+for+the+new+display+*/
++++++++var+val+=+!this.value+?+""+:+this.value;+//+mental+IE8+fix+:-(

++++++++/*+Now+do+the+filter+*/++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++if+(+val+!=+previousSearch.sSearch+&&+(val.length+>=+3+%7C%7C+val+==+""))+{
++++++++++++$.fn.dataTable.ext.internal._fnFilterComplete(+settings,+{
++++++++++++++++"sSearch":+val,
++++++++++++++++"bRegex":+previousSearch.bRegex,
++++++++++++++++"bSmart":+previousSearch.bSmart+,
++++++++++++++++"bCaseInsensitive":+previousSearch.bCaseInsensitive
++++++++++++}+);

++++++++++++//+Need+to+redraw,+without+resorting
++++++++++++settings._iDisplayStart+=+0;
++++++++++++$.fn.dataTable.ext.internal._fnDraw(+settings+);
++++++++}
++++};

++++var+searchDelay+=+settings.searchDelay+!==+null+?++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++settings.searchDelay+:
++++++++$.fn.dataTable.ext.internal._fnDataSource(+settings+)+===+'ssp'+?
++++++++++++700+:
++++++++++++200;

++++var+jqFilter+=+$(+'input',+settings.aanFeatures.f+)
++++++++.off('keyup.DT+search.DT+input.DT+paste.DT+cut.DT')
++++++++.on('keyup.DT+search.DT+input.DT+paste.DT+cut.DT',+choke(searchFn,+searchDelay))
++++++++;
}+);

})(window,+document,+jQuery);|code-block|syntax|javascript|728215|entityMap|0|LINK|mutability|MUTABLE|url|https://www.datatables.net/|1|https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js#L4194^0|4|A|0|3O|F|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

This works with <a href="https://www.datatables.net/" rel="nofollow noreferrer">DataTables</a> version 1.10.19. It only requires including the js in your website template - useful for a site that has multiple dataTables configured on different pages. Also useful for any slow xhr loading tables, will not allow any new xhr requests until all currently running finish. The search function used is very similar to how the plugin sets up the <a href="https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js#L4194" rel="nofollow noreferrer">search function</a> originally.

<pre><code>(function(window, document, $){
var xhring = 0;

$(document).on( 'preXhr.dt', function () {
 xhring++;
} );
$(document).on( 'xhr.dt', function () {
 xhring--;
} );

//at a minimum wait the full freq, and wait for any pending XHR requests to finish before calling fn
function choke( fn, freq ) {
 var
 frequency = freq !== undefined ? freq : 200,
 last,
 timerFn,
 timer;

 return function () {
 var
 that = this,
 args = arguments;

 timerFn = function () {
 if (xhring || +new Date() &lt; last + frequency) {
 clearTimeout( timer );
 timer = setTimeout( timerFn, frequency);
 } else {
 fn.apply( that, args );
 }
 }
 last = +new Date();

 clearTimeout( timer );
 timer = setTimeout( timerFn, frequency );
 };
}

//See https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js
//See https://github.com/DataTables/Plugins/blob/master/features/searchHighlight/dataTables.searchHighlight.js
$(document).on( 'preInit.dt', function (e, settings, json) {
 var previousSearch = settings.oPreviousSearch;

 var searchFn = function() {
 /* Update all other filter input elements for the new display */
 var val = !this.value ? "" : this.value; // mental IE8 fix :-(

 /* Now do the filter */ 
 if ( val != previousSearch.sSearch &amp;&amp; (val.length &gt;= 3 || val == "")) {
 $.fn.dataTable.ext.internal._fnFilterComplete( settings, {
 "sSearch": val,
 "bRegex": previousSearch.bRegex,
 "bSmart": previousSearch.bSmart ,
 "bCaseInsensitive": previousSearch.bCaseInsensitive
 } );

 // Need to redraw, without resorting
 settings._iDisplayStart = 0;
 $.fn.dataTable.ext.internal._fnDraw( settings );
 }
 };

 var searchDelay = settings.searchDelay !== null ? 
 settings.searchDelay :
 $.fn.dataTable.ext.internal._fnDataSource( settings ) === 'ssp' ?
 700 :
 200;

 var jqFilter = $( 'input', settings.aanFeatures.f )
 .off('keyup.DT search.DT input.DT paste.DT cut.DT')
 .on('keyup.DT search.DT input.DT paste.DT cut.DT', choke(searchFn, searchDelay))
 ;
} );

})(window, document, jQuery);
</code></pre>

blocks|key|728258|text|这里的大多数答案都以某种方式操纵了现有的DataTable事件绑定，但就我个人而言，在花了太长时间试图让它正常工作之后，我发现最好的方法是在ajax调用期间在search参数中发送一个虚拟值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|728259|//+...+denotes+expected+code+for+DataTable+to+function+excluded+for+clarity.
$("#example").dataTable({
++...
++'ajax':+{
++++...
++++'data':+function+(d)+{
+++++++d.search.value+=+d.search.value.length+>=+3+?+d.search.value+:+"##EmptySearch##";
+++++++return+JSON.stringify(d);
++++}
++}
});|code-block|syntax|javascript|728260|##EmptySearch##字符串只是充当一个不应该与任何返回数据匹配的值(使用什么完全是个人喜好，但它应该是一个保证不与任何数据匹配的字符串)。因为绑定还没有被操作，所以所有常见的功能仍然有效，但在搜索大于或等于三个字符之前，不会返回任何有意义的内容。诚然，这并不理想，我希望根本不发出服务器请求，但在我看来，这是最简单的方法，不会破坏DataTable搜索的现有功能。|728261|entityMap^0|27|6|0|0|0|F|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Most of the answers here in some way manipulate the existing DataTable event bindings but personally after spending far too long trying to get this working the best approach I found, in the end, was to just send a dummy value in the <code>search</code> parameter during the ajax call.
<pre><code>// ... denotes expected code for DataTable to function excluded for clarity.
$(&quot;#example&quot;).dataTable({
 ...
 'ajax': {
 ...
 'data': function (d) {
 d.search.value = d.search.value.length &gt;= 3 ? d.search.value : &quot;##EmptySearch##&quot;;
 return JSON.stringify(d);
 }
 }
});
</code></pre>
The <code>##EmptySearch##</code> string simply acts as a value that shouldn't match any returned data (it's entirely personal preference what to use, but it should be a string that is guaranteed to not match any data). Because the bindings have not been manipulated all the usual bells and whistles still work but nothing meaningful is returned until the search is greater than or equal to three characters. Admittedly it isn't ideal, would prefer to not make the server request at all but this is (in my opinion) the simplest approach that doesn't ruin the existing functionality of the DataTable search.

Is there please an option to start the search only after 3 characters have been typed in?

I have written a PHP-script for colleagues displaying 20,000 entries and they complain, that when typing a word, the first few letters cause everything to freeze.

An alternative would be to have the search to be started by a button clicked and not by character typing.

Below is my current code:

<pre><code>$("#my_table").dataTable( {
 "bJQueryUI": true,
 "sPaginationType": "full_numbers",
 "bAutoWidth": false,
 "aoColumns": [
 /* qdatetime */ { "bSearchable": false },
 /* id */ null,
 /* name */ null,
 /* category */ null,
 /* appsversion */ null,
 /* osversion */ null,
 /* details */ { "bVisible": false },
 /* devinfo */ { "bVisible": false, "bSortable": false }
 ],
 "oLanguage": {
 "sProcessing": "Wait please...",
 "sZeroRecords": "No ids found.",
 "sInfo": "Ids from _START_ to _END_ of _TOTAL_ total",
 "sInfoEmpty": "Ids from 0 to 0 of 0 total",
 "sInfoFiltered": "(filtered from _MAX_ total)",
 "sInfoPostFix": "",
 "sSearch": "Search:",
 "sUrl": "",
 "oPaginate": {
 "sFirst": "&amp;lt;&amp;lt;",
 "sLast": "&amp;gt;&amp;gt;",
 "sNext": "&amp;gt;",
 "sPrevious": "&amp;lt;"
 },
 "sLengthMenu": 'Display &lt;select&gt;' +
 '&lt;option value="10"&gt;10&lt;/option&gt;' +
 '&lt;option value="20"&gt;20&lt;/option&gt;' +
 '&lt;option value="50"&gt;50&lt;/option&gt;' +
 '&lt;option value="100"&gt;100&lt;/option&gt;' +
 '&lt;option value="-1"&gt;all&lt;/option&gt;' +
 '&lt;/select&gt; ids'
 }
} );
</code></pre>

jQuery DataTables: Delay search until 3 characters been typed OR a button clicked

服务器

jQuery

JSON

是否有选项仅在键入3个字符后才开始搜索？我为同事写了一个PHP脚本，显示了20,000个条目，他们抱怨说，当输入一个单词时，前几个字母会导致一切冻结。另一种方法是通过单击按钮而不是通过键入字符来启动搜索。下面是我当前的代码：$("#my_table").dataTable( {        "bJQueryUI": ...

问jQuery DataTables:延迟搜索，直到键入3个字符或单击按钮
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery DataTables:延迟搜索，直到键入3个字符或单击按钮EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery DataTables:延迟搜索，直到键入3个字符或单击按钮
EN