How to do a live search results using DataTables

wfa

I'm using DataTable with Ajax that gets JSON from Java Servlet. How can I do a live search where data is actively fetched as the user type in the search box. Is there a specific DataTables method to do that?
Here is my current page (it's in Arabic)
https://makhtutat.com/manuscripts.html

allan

Looks like you've created your own input element. That's absolutely fine, you just need to add an event listener to it (keyup and input would do), and then call the search() method with the input value.

Allan

wfa

Thanks for the reply
But doesn't this search works on the resulting table locally?
It will not fetch new data as I type in the main #searchbar input box.
Do you have an existing web page where this idea is implemented?

colin

This is what Allan meant - please see example here.

As you've added your own input for the filtering, you need to add code/events to search when strings are entered:

$('#custom').on('keyup', function() {
  table.search($('#custom').val()).draw();
})

Colin

allan

Do you mean you need to Ajax fetch new data on each key press? If so, make your Ajax call to get the new data based on to the search value and use clear() and then rows.add() to clear and then add the new data to the table.

Allan