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

You Might Also Like

Comments

      1. Thanks but i need to fix this
        “Now i am facing one more issue that the data coming from DB contain “&” sign, but this plugin render “&” sign as “&” due to which my search is not working well. any solution ??”

      2. Now i am facing one more issue that the data coming from DB contain “&” sign, but this plugin render “&” sign as “&” due to which my search is not working well. any solution ??

  1. Thanks ! i fix that issue by using the following.
    “paging”: false,
    “ordering”: false,
    “info”: true,

    Now i am facing one more issue that the data coming from DB contain “&” sign, but this plugin render “&” sign as “&” due to which my search is not working well. any solution ??

  2. @Michael Ryvkin Sir i was wondering is there any option/way to sort data data when input list drop down ? Like when i type “JA” in your text input field the drop down data will be shown in alphabetical order.
    Waiting for your kind response !

      1. Ohm tks you very much.
        I have a final project at school and i want to search with database “phalcon framewwork” Can you give me a little guidance?

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)