Автокомплит данных из базы данных

Автокомплит – довольно частая задача в вебе и не только. Очень выручает, когда необходимо сделать подгрузку вариантов выбор в зависимости от каких либо условий, например выбора значения из соседнего выпадающего списка, или когда пользователь вводит какой то текст, а автокмплит фильтрует данные по этому тексту. Ранее я уже писал заметку о том, как сделать зависимые списки.

Существует огромное кол-во вариантов как сделать автокомплит. Но на jQuery UI получается намного проще и быстрее.

В этой заметке мы пошагово реализуем задачу на примере laravel. Но точно так же будет работать в любом другом фреймфорке или cms

Задача

Предположим, у нас есть таблица продуктов с полями id, name, buy_rate, sale_priceи т. д. При создании счета-фактуры нам нужно автозаполнение для выбора продукта. После поиска продукта по идентификатору, когда мы выберем продукт, он автоматически заполнит имя, курс покупки, цену продажи.

Шаг 1: добавьте jQuery

<script src="https://unpkg.com/jquery@2.2.4/dist/jquery.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"/>

Шаг 2: Определение Маршрута

Нам нужно 2 маршрута. Один для того, чтобы просто показать наше представление, где мы будем строить наше автозаполнение, а другой для службы API JSON для подачи JSON в наш jQuery UI autocomplete.

Route::get('admin/invoice/create','InvoiceController@create');
Route::get('admin/api/product','InvoiceController@getAutocompleteData'); 

Шаг 3: Сделайте сервис JSON

Теперь нам нужен сервис API JSON для нашего автозаполнения. Давайте сделаем код в InvoiceController для создания службы API JSON и возврата представления для автозаполнения.

<?php

namespace App\Http\Controllers;

use App\Product;
use Illuminate\Http\Request;


class InvoiceController extends Controller
{
    public function getAutocompleteData(Request $request){
        if($request->has('term')){
            return Product::where('name','like','%'.$request->input('term').'%')->get();
        }
    }

    public function create(){
        return view('admin.invoices.create');
    }
}

Шаг 3: Сделайте шаблон

Добавьте create.blade.php в каталоге resources/admin/invoices и добавьте следующее

@extends('app')

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h4>Autocomplete from database</h4>
                <hr>

                <div class="form-group">
                    <label>Product</label>
                    <input id="product_id" name="product_id" type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label>Name</label>
                    <input id="name"  type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label>Buy Rate</label>
                    <input id="buy_rate"  type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label>Sale Price</label>
                    <input id="sale_price"  type="text" class="form-control">
                </div>

            </div>
        </div>
    </div>

@endsection

Шаг 4: Сделайте JS-код для автозаполнения

Напишем код на js

$(function () {
           $('#product_id').autocomplete({
               source:function(request,response){
                
                   $.getJSON('?term='+request.term,function(data){
                        var array = $.map(data,function(row){
                            return {
                                value:row.id,
                                label:row.name,
                                name:row.name,
                                buy_rate:row.buy_rate,
                                sale_price:row.sale_price
                            }
                        })

                        response($.ui.autocomplete.filter(array,request.term));
                   })
               },
               minLength:1,
               delay:500,
               select:function(event,ui){
                   $('#name').val(ui.item.name)
                   $('#buy_rate').val(ui.item.buy_rate)
                   $('#sale_price').val(ui.item.sale_price)
               }
           })
})

Надеюсь, данная заметка поможет вам разобраться как сделать функционал автокомплита на вашем сайте. Если было полезно, то расскажите друзьям.
Предлагаю оставить ссылки на ваши реализованные автокомплиты в комментариях