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!

17
Leave a Reply

avatar
8 Comment threads
9 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
sapneshnaikJoshRaj KothariNiket PathakBurhan GOK Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Amratha Tendulkar
Guest
Amratha Tendulkar

NYC!

Niket Pathak
Guest

It works! Although, the version of typeahead/bloodhound used in this tutorial is not maintained since 3+ years now(reference github). There’s an actively maintained fork(as of 2018), here is their tutorial as well.

Anij
Guest
Anij

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

Francisco Bosch
Guest
Francisco Bosch

Working nacely!

Thanks for the tutorial.

Alex
Guest
Alex

Its not working for me!
Error in console: “Uncaught TypeError: $(…).typeahead is not a function”

Burhan GOK
Guest
Burhan GOK

Very good post really. Thank you very much really )))

Raj Kothari
Guest
Raj Kothari

How to click on the selected items?

Josh
Guest
Josh

Thanks for posting! I tried this with a different model than User, and I keep getting 404s. Is there something else I need to do to work with other models?

Josh
Guest
Josh

Thanks for the very helpful post! I tried to get this working with another model, but I keep getting 404s. Is there something I’m missing? Do I need to create an API endpoint or something?