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 May 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?

  3. I am not able to see the drop down using above code i am able to see its getting generated in inspect element but not visible any reason for the same

  4. Thank you it works fine. But my table cells are contenteditable. After editing a cell the new cell value does not come into the autocomplete. can you help please? Thank you again.

    1. I assume you modify cell content directly which DataTables plugin is unaware of. From the official documentation:

      DataTables holds cached information about the contents of each cell in the table to increase performance of table operations such as ordering and searching. If you were to modify the contents of a cell (for DOM data source tables) or the array / object values (for Ajax / JS source tables) DataTables wouldn’t know that this has happened.

      There are two DataTables API methods that could be helpful in this case.

      • If you want to use DataTables plugin to modify content of a cell, use cell().data() API method. Don’t forget to chain it with draw() API method.
      • If you want to modify content of a cell yourself, use cell().invalidate() API method afterwards to invalidate the data cached by DataTables plugin.
  5. Thank you, it works with invalidate(). and i apply it for a full row in order to have all cells from that row updates. Like this : api.row(indextr).invalidate();

    Great thanks again

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)

This site uses Akismet to reduce spam. Learn how your comment data is processed.