Bootstrap TypeaHead JS提供了用户界面,因此可以轻松地编写JQuery Ajax的代码,并在Laravel 8应用程序中进行动态自动完成搜索。无涯教程可以轻松使用Typeahead JS与Bootstrap。
步骤1:下载Laravel 8
首先,需要使用命令获取最新的Laravel 8版本应用程序,运行以下命令:
composer create-project --prefer-dist laravel/laravel blog
步骤2:创建迁移和模型
在此步骤中必须使用laravel 8 php artisan命令为项目表创建迁移:
php artisan make:migration create_items_table
执行此命令后,您将在以下路径“database/migrations"中找到一个文件。
<?php
use Illuminate\Support\Facades\Schema;
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->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('items');
}
}
然后,简单运行迁移命令:
php artisan migrate
创建"items"表后,您应该为项目创建项目模型,因此首先在此路径中创建文件"app/Models/Item.php"并将内容放在Item.php文件中:
app/Models/Item.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}
步骤3:创建路由
在这一步中,需要创建显示视图和Ajax方法的路由。所以打开"routes/web.php"文件并添加以下路由。
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('search', [SearchController::class, 'index'])->name('search');
Route::get('autocomplete', [SearchController::class, 'autocomplete'])->name('autocomplete');
步骤4:创建控制器
在这一步中,无涯教程必须创建一个新的控制器作为SearchController,并且还需要在该控制器上添加两个方法index()和autocomplete(),如下所示:
app/Http/Controllers/SearchController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Item;
class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('search');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete(Request $request)
{
$data = Item::select("name")
->where("name","LIKE","%{$request->query}%")
->get();
return response()->json($data);
}
}
步骤5:创建视图文件
在最后一步中创建search.blade.php以进行布局,并在此处列出所有项目代码并配置以下代码:
resources/views/search.Blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Autocomplete Search using Bootstrap Typeahead JS - learnfk</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<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 8 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>
在运行此示例之前,请确保在项目表上有一些虚拟数据。现在已准备好运行无涯教程的示例,因此运行命令快速运行:
来源:LearnFk无涯教程网
php artisan serve
现在,您可以在浏览器上打开以下URL:
http://localhost:8000/search
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)