jQuery DataTables: Search input with autocomplete using Typeahead and Bootstrap

Client-side processing mode

In client-side processing mode full dataset is available once table has been initialized. The trick is to iterate over each cell and add its data to a list that will be used as data source for autocomplete control.


Server-side processing mode

In server-side processing mode only single page data is available at all times. You would need to implement a way to lookup suggestions on the server and query that data using Ajax request.

In the example below I am using pre-populated plain array to emulate response from the server for demonstration purposes. Your server-side method should query the database and return only relevant search results as plain array in JSON format.

It also would make sense to limit the number of search results to the number of items you want to shown in autocomplete control, default number of suggestions is 8 controlled by items option.


Recommended For You


Online Courses

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.