Change datatables search function

Question

I'm using jQuery DataTables 1.10.9 and trying to change the search function in jQuery DataTables, so that it needs at least 3 characters before it starts searching. So I read that you need to unbind the current datatables searchbox like so:

$(".dataTables_filter input").unbind().bind("keyup", function(){
    alert("whoo");
});

So now it should alert whoo when i type anything in the searchbox, but it just does the normal search function. So my guess is that it's not getting the correct field. I have also tried:

$('.input[type="search"]').unbind().bind("keyup", function(){
    alert("whoo");
});

but that didn't help either.

var dt = $('#example').DataTable({
   "order": [[11, "desc"]],
   "processing": true,
   "serverSide": true,
   "ajax": "/datatables/test" + id,
   "language": {
      "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
   }
});

EDIT

I did try the code from jQuery DataTables: Delay search until 3 characters been typed OR a button clicked

But since i didn't get that working, i posted this question.

My guess that it isn't working is that it just cant find the input form, but i cant understand why, so ill post my html here as well.

<input type="hidden" id="q" name="q" value="<?php echo $_GET['q']; ?>"/>
<table id="example" class="table table-hover" cellspacing="0" width="100%">
    <?php if($_GET['k_id'] != ""){?>
        <input type = "hidden" value = "<?php echo $_GET['k_id']; ?>" id = "k_id" />
    <?php }elseif($_GET['w_id'] != ""){ ?>
        <input type="hidden" value="<?php echo $_GET['w_id'];  ?>" id="w_id"/>
    <?php } ?>
    <thead>

This page is about looking up every product there is currently in the database. The 3 input fields are there so when a user is looking on a profile of someone and he wants to see what products they have for sale it will fill up a variable and send it to the datatables function like so. (that also explains why the +id is behind the ajax url)

if($('#k_id').val() > 0) {
            var id = "?k_id=" + $('#k_id').val();
        }else if($('#w_id').val()){
            var id = "?w_id=" + $('#w_id').val();
        }else{
            var id = "";
        }

The input form is inside a div with id=example_filter and class= dataTables_filter (i'd upload a picture but i dont have 10 rep yet xd).

Answer 1

Ok so i figured out what my problem was..

The jquery was looking for $('.dataTables_filter input') before it actually existed. and the answer to that was to put a window.load around it

$(window).load(function(){
            var iets = $('.dataTables_filter input');
            iets.unbind().bind("keyup", function (e) {
                if(iets.val().length >= 3) {
                    dt.search(iets.val()).draw();
                }
                if(iets.val() === ""){
                    dt.search(iets.val()).draw();
                }
            });
        });

Answer 2

SOLUTION

Use the code below to disable default handler and attach your own event handler when user types something in the search box.

$('.dataTables_filter input', dt.table().container())
    .off('.DT')
    .on('keyup.DT cut.DT paste.DT input.DT search.DT', function (e) {
       // If the length is 3 or more characters, or the user pressed ENTER, search
       if(this.value.length >= 3 || e.keyCode == 13) {
          // Call the API search function
          dt.search(this.value).draw();
       }

       // Ensure we clear the search if they backspace far enough
       if(this.value === "") {
          dt.search("").draw();
       }
    });

LINKS

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

Answer 3

this should do it, if input length is 3 or more chars it searches your input val, else it keeps all results. working jsfiddle

$('.dataTables_filter input').unbind().bind("input", function (e) {

    if ($(this).val().length < 3)
        dt.fnFilter("");
    else
        dt.fnFilter($(this).val());
});