Laravel 8 - Autocomplete搜索

Laravel 8 - Autocomplete搜索 首页 / Laravel8入门教程 / Laravel 8 - Autocomplete搜索

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>

在运行此示例之前,请确保在项目表上有一些虚拟数据。现在已准备好运行无涯教程的示例,因此运行命令快速运行:

链接:https://www.learnfk.comhttps://www.learnfk.com/laravel/laravel-8-autocomplete-search-from-database-exampleexample.html

来源:LearnFk无涯教程网

php artisan serve

现在,您可以在浏览器上打开以下URL:

http://localhost:8000/search

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

玩转Spring全家桶 -〔丁雪丰〕

编辑训练营 -〔总编室〕

说透5G -〔杨四昌〕

如何落地业务建模 -〔徐昊〕

玩转Vue 3全家桶 -〔大圣〕

深入浅出分布式技术原理 -〔陈现麟〕

人人都用得上的数字化思维课 -〔付晓岩〕

Web 3.0入局攻略 -〔郭大治〕

JavaScript进阶实战课 -〔石川〕

好记忆不如烂笔头。留下您的足迹吧 :)