Laravel autocomplete search with typeahead.js

Laravel autocomplete search with typeahead.js

Search autocompletion is a must-have feature for most web applications of today and I have used the Twitter’s typeahead.js autocomplete library in many of the Laravel based projects I have worked on. typeahead.js provides a simple yet robust solution for search autocompletion and it comes coupled with an excellent suggestion engine called Bloodhound.

The typeahead.js library consists of two parts:

  1. Bloodhound – The suggestion engine, is responsible for computing suggestions and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.
  2. Typeahead – The User Interface, using which you can display the search results and it also provides several options for customization.

Now let us see how we can use typeahead.js in our Laravel application by implementing an autocomplete user search in this tutorial.

Set up routes and controllers:

  • Define a route in web.php to  display our search form,
  • Define a search route which will be responsible for returning search results.
  • Create a SearchController and add the following searchUsers() method to it.

Set up the view:

  • Create a search.blade.php in the resources/views directory and add the below code to it.

    • Here we process the suggestions using bloodhound and you can see that we have specified remote.url as /user/find?q=%QUERY%, which is the route we defined in our web.php.
    • We then initialize typeahead on out search input and set the source as bloodhound.
    • Some key things to note here:
      • The display function is responsible for the input value that is going to be set when you select a suggestion.
      • Templates key lets you customize the look of your suggestions, here you can set a template for when there are no results found (empty) and you can also customize the actual suggestion template.
      • I have added this style script to fix a bug where the width of the suggestions was not equal to the input itself. Feel free to use this and customize it to your needs.
      • Feel free to play around with other options such as hint and highlight and there are lots more options of typeahead and you can read them all on its GitHub page.

That’s it, your search autocompletion should work now! Here is how my simple example looks like.

Laravel autocomplete search with typeahead.js

The source code for the example project used in this tutorial can be found in my GitHub repository.

Hope you found this article helpful. Feel free to share your thoughts or ask any questions in the comment section below! and be sure to checkout my other tutorials in the Laravel section!

Leave a Reply

7 Comments on "Laravel autocomplete search with typeahead.js"

newest oldest most voted
Notify of
Amratha Tendulkar
Amratha Tendulkar



How it can be installed through NPM? I did it few day back. It was giving error.

Francisco Bosch
Francisco Bosch

Working nacely!

Thanks for the tutorial.