Laravel 8: Реализация формы поиска с автозаполнением из базы данных с помощью jQuery Ui и Ajax

Laravel 8 автозаполнение текстового поля, поиск поля ввода из базы данных с использованием jQuery ajax. В этом руководстве вы узнаете, как реализовать поиск в текстовом поле и поле ввода из базы данных в приложении laravel 8 с помощью jQuery Ui и ajax.

Механизм автозаполнения часто используется на современных веб-сайтах, чтобы предоставить пользователям список предложений при вводе начального слова в текстовое поле. jQueryUI предоставляет виджет автозаполнения для облегчения работы пользователей, предоставляя список предложений для ввода в текстовое поле.

В этом учебном пособии по базе данных Laravel 8 jQuery Ui Autocomplete Search будет создано простое текстовое поле для поиска продукта. После этого будет реализован пользовательский интерфейс jQuery и код ajax для поиска данных автозаполнения или автозаполнения из базы данных в приложении laravel 8. 

Laravel 8 Autocomplete Search с использованием пользовательского интерфейса jQuery и Ajax из базы данных

Выполните следующие шаги и создайте поиск с автозаполнением с использованием jQuery ui и ajax из базы данных в приложениях laravel 5, 6, 7, 8:

Шаг 1 - Установите приложение Laravel 8

Прежде всего, выполните следующую команду в командной строке, чтобы установить / загрузить новую установку laravel 8 в вашей системе или на сервере: 

composer create-project --prefer-dist laravel/laravel blog

Шаг 2 - Конфигурация и подключение к базе данных

На этом шаге подключитесь к базе данных. Итак, откройте файл .env и добавьте детали базы данных, как показано ниже: 

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=здесь имя вашей базы данных
 DB_USERNAME=здесь имя пользователя базы данных
 DB_PASSWORD=здесь пароль базы данных

Шаг 3 - Создание модели и миграция

На этом этапе выполните следующую команду в командной строке, чтобы создать модель продукта и файл миграции: 

php artisan make:model Product -m

Затем откройте файл product.php, который находится в каталоге app/model и добавьте в него следующий код:

<?php
   
namespace App\Models;
   
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
   
class Product extends Model
{
    use HasFactory;
   
    protected $fillable = [
        'name'
    ];
}

После этого откройте create_products_tables.php, который находится в каталоге database/migration и добавьте в него следующий код:

<?php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
   
class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }
   
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Шаг 4 - Создание модели и миграция

На этом этапе создайте два маршрута: один для окна поиска, а второй - для автозаполнения данных поиска с использованием jquery и ajax: 

<?php
   
use Illuminate\Support\Facades\Route;
   
use App\Http\Controllers\AutoCompleteController;
   
/*
|--------------------------------------------------------------------------
| 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', [AutoCompleteController::class, 'index'])->name('search');
Route::get('autocomplete', [AutoCompleteController::class, 'autocomplete'])->name('autocomplete');

Шаг 5 - Создайте контроллер

На этом этапе создайте контроллер с именем AutoCompleteController, выполнив следующую команду в командной строке: 

php artisan make:controller AutoCompleteController

Затем откройте AutoCompleteController.php, который находится в каталоге app/http/controllers и добавьте следующий код в этот файл:

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Models\Product;
   
class AutoCompleteController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('autocomplete-search');
    }
   
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function autocomplete(Request $request)
    {
        $res = Product::select("name")
                ->where("name","LIKE","%{$request->term}%")
                ->get();
    
        return response()->json($res);
    }
}

Шаг 6 - Создайте представление (view) Blade

На этом этапе перейдите в каталог resources/views и создайте файл представления с именем autocomplete-search.blade.php.

Затем добавьте следующий код в autocomplete-search.blade.php: 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Autocomplete Textbox From Database with jQuery Ajax - MakeCodes.ru</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/jаvascript">
       var siteUrl = "{{url('/')}}";
    </script>
</head>
<body>
 
<div class="container mt-4">
 
  <div class="card">
    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 8 Autocomplete Textbox From Database using jQuery ajax - MakeCodes.ru</h2>
    </div>
 
    <div class="card-body">
      <form name="autocomplete-textbox" id="autocomplete-textbox" method="post" action="#">
       @csrf
 
        <div class="form-group">
          <label for="exampleInputEmail1">Поиск продукта по названию</label>
          <input type="text" id="name" name="name" class="form-control">
        </div>
 
      </form>
    </div>
  </div>
   
</div>  
  <script src="{{ asset('auto.js') }}"></script>
</body>
 
</html>

Шаг 7 - Внедрение кода jQuery Ajax

На этом этапе перейдите к каталогу public и создайте в нем один файл с именем auto.js.

Затем добавьте следующий код в файл auto.js:

$(document).ready(function() {
    $( "#name" ).autocomplete({
  
        source: function(request, response) {
            $.ajax({
            url: siteUrl + '/' +"autocomplete",
            dаta: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.name;
               }); 
  
               response(resp);
            }
        });
    },
    minLength: 2
 });
});

Шаг 8 - Запустите сервер разработки и проверьте работу

Теперь выполните команду php artisan serve в командной строке, чтобы запустить сервер: 

php artisan serve

Затем откройте браузер и запустите его по указанному URL: http://localhost:8000/search 

В данном руководстве, вы узнали, как реализовать поиск с автозаполнением в приложении laravel 8.