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.

Example

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.

Example

Recommended For You

Books

Online Courses

Online computer science courses to jumpstart your future.

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.
(Optional)