Laravel 8 Автозаполнение поиска из базы данных

В этой статье мы рассмотрим автозаполнение поиска из базы данных в laravel 8. Используя ajax autocomplete textbox в laravel 8, мы будем получать записи из базы данных и получать в laravel.

Итак, давайте рассмотрим автозаполнение поиска в laravel 8, автозаполнение поиска с помощью ajax, пример автозаполнения поиска, ajax автозаполнение textbox в laravel 8.

Когда у вас больше данных в таблице за один раз, вы не можете дать выпадающее поле, потому что это займет больше времени для получения данных из базы данных. Поэтому здесь мы добавим автозаполнение поиска с помощью ajax.

Шаг 1: Добавить маршрут

Здесь я добавил метод routes в файл маршрута для этого примера автозаполнения поиска в laravel.

<?php

use IlluminateSupportFacadesRoute;
use AppHttpControllersUserController;

Route::get('/', function () {
    return view('welcome');
});

Route::get('search', [UserController::class, 'search']);
Route::get('autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');

Войти в полноэкранный режим Выход из полноэкранного режима

Читайте также Загрузка дополнительных данных в Laravel с помощью Ajax jQuery

Шаг 2: Создайте контроллер

Сейчас я уже создал UserController для этого примера. Поэтому вы можете создать контроллер в соответствии с вашими требованиями и добавить приведенный ниже код в ваш контроллер.

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppUser;
use DB;

class UserController extends Controller
{
    public function search()
    {
        return view('user');
    }

    public function autocomplete(Request $request)
    {        
        $data = User::select("name")
                ->where("name","LIKE","%{$request->str}%")
                ->get('query');   
        return response()->json($data);
    }
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Читайте также Пример автоперехода к следующему полю ввода на JQuery

Шаг 3: Создайте файл Blade

На последнем шаге мы создадим файл user.blade.php для вывода представления.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Autocomplete Search from Database - Techsolutionstuff</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.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">
    <h2 style="margin: 30px 0px; text-align: center;">Laravel 8 Autocomplete Search from Database - Techsolutionstuff</h2>   
    <input class="search form-control" type="text" placeholder="Search here...">
</div>   
<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.search').typeahead({
        source:  function (str, process) 
        {
          return $.get(path, { str: str }, function (data) {
                return process(data);
            });
        }
    });
</script>   
</body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима

Вам также может понравиться

Читайте также : Пример CRUD-операции в Laravel 8
Читайте также Как сгенерировать штрихкод в Laravel
Читайте также : Как создать пользовательский Middleware в Laravel

Laravel 8 Автозаполнение поиска из базы данных

Рекомендуем почитать: