jQuery AutoComplete Search with Laravel

Using jQuery AutoComplete Widget via Laravel Route Function

In this article, I’m going to integrate one of jQuery’s popular User Interface Plugin/Widget – “Autocomplete” with Laravel. I first used this plugin with CodeIgniter (another powerful framework of PHP) in early 2015. I’ve found this widget so useful and handy that I’ve decided to integrate it with my Laravel as well. I’ve come across many difficulties when integrating Autocomplete with Laravel, that’s why I’ve written this article so that others won’t have to face the same problems. Well that’s enough for the intro.. Lets dig in!

As usual, we have two ways to do this:

  1. Anonymous Route Function
  2. or through Controller

First we’ll do this via Route Function, and then in my next article we’ll do this via Controller.

Note: Before starting, do download and include stylesheet and js file of jQuery UI OR load it directly from CDN.

Way #1: Route Function

Go ahead and create a Input field and give it an “id”. [see image and code below]

<input type="text" id="friendname">

jquery-autocomplete-laravel-1

Here I’ve a Friend’s Name input field which will populate the names as the User starts typing. As I’ve given this input field an id=”friendname”, so our script will be:

<script type="text/javascript">

$("#friendname").autocomplete({
 source: '{{ url('getfriendname') }}',
 minLength: 2,
 });

</script>

Here in the above script, we’ve provided the “source” and in this source we’ve used Laravel’s URL helper function to access the route and we’ve also provided “minLength” which is the minimum number of characters a user must type before a search is performed.

There are lots of Options, Methods and Events available in this Autocomplete Library.

So what will happen is that, User must have to type at-least two characters to perform the search mechanism and the typed characters will be passed on the route i.e. “getfriendname” and as this is Way #1, so we will be handling the operation from our route via function.

This will be our Route:

Route::get('getfriendname', function()
 {
 $x = Input::get('term');

$results = DB::table("user")->distinct()->select('given_name')->where('given_name', 'LIKE', '%'.$x.'%')->get();

foreach ($results as $r)
 {
 $return_array[] = array('value' => $r->given_name);
 }

return Response::json($return_array);
 });

Here we are using Input and DB Facade (you can also include them at top of the routes file via use keyword.)

In the first line, we are getting the typed input character into a variable $x. Note that we’ve used the word “term” in the get method because by default jQuery Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. [see documentation]

Then we simply performed our database query and stored it into another variable $results. As $results variable will be an array of objects, so looping through it and storing only the “given_name” field as an array with the key “value” into $return_array variable and return this variable as JSON.

Note: We used “value” as key here, because term property, refers to the value of the text input field.

And believe it or not, that’s it! Do give it a try and don’t forget to share it 😉

jquery-autocomplete-laravel-route-2

jquery-autocomplete-laravel-route-3

One thought on “jQuery AutoComplete Search with Laravel

Leave a Reply

Your email address will not be published. Required fields are marked *