Twitter Typeahead integration using Laravel
In this post we will show you Twitter Typeahead integration using Laravel, hear for Twitter Typeahead integration using Laravel we will give you demo and example for implement.
The twitter typeahead is a standout amongst the most well known completely included ajax driven live hunt module accessible totally free right at this point. Another contrasting option to this module is Jquery UI Autocomplete. In this instructional exercise, we will demonstrate to you the simplest approach to incorporate typeahead.js variant 0.9.3 in your Laravel extend. The pursuit box will bring information remotely utilizing ajax.
The Javascript Code is given below
<!-- Typeahead -->
{!! Html::script('js/typeahead.min.js') !!}
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:"{{ url('/search/%QUERY') }}",
limit : 6,
});
});
</script>
The code for material design lite search box (You can demo it on the navigation bar of this site) is given below
<h2>Twitter Typeahead integration using Laravel</h2> <div style="padding-bottom:0px;" class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input typeahead" type="text" name="search" id="search-expandable" style="width: 300px;"> <label class="mdl-textfield__label" for="search-expandable"></label> </div> </div>
Now it is time to setup routes in laravel
Route::get('search/{key}','HomeController@getSearch')
->where('key','^[\w\d\-\_\. ]+$');
Now the getSearch function code in HomeController
public function getSearch($getkey)
{
$post_data = Post::where('title', 'like', '%' . $getkey . '%')->limit(6)->get();
foreach($post_data as $post_val)
{
$array_val[] = $post_val->title;
}
return json_encode($array_val);
}
Final step some CSS to improve the looks
<style>
.tt-hint{color:#7c4eff}.tt-dropdown-menu{background-color:#FFF;border:1px solid rgba(0,0,0,.3);box-shadow:0 5px 11px rgba(0,0,0,.2);margin-top:12px;padding:8px 0;width:301px}.tt-suggestion{padding:3px 21px}.tt-suggestion.tt-is-under-cursor{background-color:#7c4dff;color:#FFF}.tt-suggestion p{margin:0}
</style>
Note For Twitter Typeahead integration using Laravel
hear we utilize old version of typeahead in light of the fact that it is much steady and simple to incorporate than current form which is 11.1. On the off chance that you are utilizing most recent form both code and CSS won’t function as I plan CSS for variant 0.9.3. You can download the Typeahead version 0.9.3 from GitHub from the accompanying connection.
Hope this code and post will helped you for implement Twitter Typeahead integration using Laravel. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org