Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Friday, July 15, 2016
Laravel Autocomplete Search with Bootstrap Typeahead JS
Autocomplete search is required when we work with large database search items. Because it's not user friendly to use dropdown for every item. So when we have to large data searching we use Autocomplete Search. Here I've used popular autocomplete search using Bootstrap Typehead JS.
1. Make a Model and a Table named "Item" with the following command.
php artisan make:model Item -m
2. Change the Model Item.php with the following code:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Item extends Model { public $fillable = ['title','description']; }
3. Change the items migration file ( you can get it in database/migrations directory with the following code:
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateItemsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('items', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop("items");
}
}
4. Now run the following command:
php artisan migrate
5. Put some demo data in database with the name and description in items table.
6. Now we have to create the route:
routes.php
<?php
Route::get('/search',[
'uses' => 'SearchController@search',
'as'=>'search'
]);
Route::get('/autocomplete',[
'uses'=>'SearchController@autocomplete',
'as'=>'autocomplete'
]);php artisan make:controller SearchController
8. Change the SearchController.php code with the following code:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Item;
class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function search()
{
return view('search');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete(Request $request)
{
$data = Item::select("title as name")->where("title","LIKE","%{$request->input('query')}%")->get();
return response()->json($data);
}
}<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="container">
<h1> Laravel Autocomplete Search using Bootstrap Typeahead JS</h1>
<input class="typeahead form-control" type="text">
</div>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
</body>
</html>10. That's it, now when you search the route and write a name of keyword in searchBox you might have seen the relevant search name like the following:
Sunday, June 26, 2016
Autocomplete search with Laravel | Laravel Autocomplete with jQuery UI
1. Let's create a Route first:
Route::get('/autocomplete',[
'uses'=>'UserController@autocomplete',
'as'=>'autocomplete'
]);
2. Now Let's define the controller:public function autocomplete(Request $request){$term = $request->term;$results=array();$queries = DB::table('users')->where('name', 'LIKE', '%'.$term.'%')->take(5)->get();foreach ($queries as $data){$results[]=['id'=>$data->id,'value'=>$data->name];}return response()->json($results);}
3. Here comes the view page:
(a) Don't forget to put following cdn inside of your <head></head> tag first:
(b) Now in body tag, first we have to make a form where we'll put the key for searching and then add a JavaScript code just before the end body tag (</body>). Eg:<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.0.min.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<div class="ui-widget"><input type="text" id="searchname" placeholder="Enter name" class="form-control"/></div><script type="text/javascript">jQuery(document).ready(function($) {$('#searchname').autocomplete({source: "{{ route('autocomplete') }}" ,minlength:1,autofocus:true,select:function(event,ui){$("searchname").val(ui.item.value);}});});</script>
So That's it, when you visit the route in your url, you'll see like a following autocomplete search in your view page.
Thank you for reading the full article.
