Implementing Smart Search with Laravel and Typeahead.js

In depth tutorial on enhancing your default site search with real-time suggestions using Laravel and Typeahead.js.

Introduction

In a big web application, like an online market or a social network, one of the most important parts of the app is the search functionality. Having a great search feature will help your users find the right content(users, products, articles) quickly and easily.

In this tutorial, we are going to learn, how to enhance your default search field in your site with real-time suggestions from the database. We will be using Laravel, jQuery and Typeahead(Bloodhound as the suggestion engine) to implement the smart search and Bootstrap for the styling. So, let’s get started.

Typeahead.js

Typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust search auto-completion. It’s library consists of two components:

1. Typeahead — The UI view
2. Bloodhound — The suggestion engine

The suggestion engine computes the suggestions for a given query and the UI view renders them. Both can be used separately. In this tutorial, we are going to use both of them. Here is an example of how Typeahead works:

http://codepen.io/balajinatarajan/pen/ocKxC

Getting Started