jQuery DataTables: Search input with autocomplete using Typeahead and Bootstrap

Michael Ryvkin
24 24

In the examples below I will demonstrate how to add autocomplete functionality to search input box for jQuery DataTables using typeahead.js library adapted for Bootstrap 3.

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

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
jQuery DataTables: Why click event handler does not work
jQuery DataTables: Alphabetical Search
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

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

        Reply

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

        Reply

  2. 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 ??

    Reply

  3. @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 !

    Reply

      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?

        Reply

  5. 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

    Reply

  6. Hi Micheal Thanks for replying back , it was css issue, figured it out thanks for the tutorials … respect

    Reply

  7. 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.

    Reply

    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.
      Reply

  8. 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

    Reply

  9. Hi sir! Datatables search box is not working when the table contains textbox values. Kindly share a solution for this issue.

    Reply

Leave a Reply

(optional)

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