Jquery UI Autocomplete Search In Laravel 6 Tutorial

How to implement jquery ui autocomplete search with Database in laravel 6 with example. In this laravel tutorial, We will share with you how to implement autocomplete search with database using jquery ui example.

Today we will implement jquery ui autocomplete search simple and easy way. Just follow the few steps and implement autocomplete search in your laravel Application

Autocomplete Search Jquery Ui

Contents

  • Install Laravel App
  • Setup Database
  • Generate Fake Records
  • Make Routes
  • Create Controller & Methods
  • Create Blade View
  • Conclusion

Install Laravel App

First of we need to download laravel fresh setup. Use the below command and download fresh new laravel setup :

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

Setup Database

After successfully install laravel Application, Go to your project .env file and set up database credential and move next step :

 DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Generate Fake Records

Before we add fake records in database first migrate the table in database using the below command :

php artisan migrate

We need to add fake records in our database. use the below command and add 100 fake records in database :

php artisan migrate

php artisan tinker

factory(App\User::class, 100)->create();

Make Routes

Now we will create two routes one for show search input box and second for autocomplete search using jquery ui autocomplete.

 Route::get('search', '[email protected]');
Route::get('autocomplete', '[email protected]');

Create Controller

We need to create a controller name AutoCompleteController. Use the below command and create Controller :

php artisan make:controller AutoCompleteController

After successfully create controller go to app/controllers/AutoCompleteController.php and put the below code :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class AutoCompleteController extends Controller
{

    public function index()
    {
        return view('search');
    }

    public function search(Request $request)
    {
          $search = $request->get('term');
     
          $result = User::where('name', 'LIKE', '%'. $search. '%')->get();

          return response()->json($result);
           
    } 
}

Create Blade view

In this step we need to create blade view file. Go to app/resources/views and create one file name search.blade.php .

After create blade file put the below html code here with jquery ui and css library file :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Auto Complete Search Using Jquery UI - Tutsmake.com</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-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>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>laravel 6 Auto Complete Search Using Jquery UI</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>
<script>
 $(document).ready(function() {
    $( "#search" ).autocomplete({

        source: function(request, response) {
            $.ajax({
            url: "{{url('autocomplete')}}",
            data: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    //console.log(obj.city_name);
                    return obj.name;
               }); 

               response(resp);
            }
        });
    },
    minLength: 1
 });
});

</script>   
</body>
</html>

We have put some script code in search.blade.php file. The script code will work to search a data from database and return data to our view file this ajax method full field over jquery autocomplete search example.

Start Development Server

We need to start development server. Use the php artisan serve command and start your server :

 php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

 http://localhost:8000/search

Conclusion

In this tutorial , We have successfully implemented auto complete search in our laravel 6 application. our examples run quickly.

If you have any questions or thoughts to share, use the comment form below to reach us.

13 Comments

  1. Emmanuel Herrera said:

    Hello, what can i do to, show the name of the User but send the id

    October 10, 2019
    Reply
  2. Andreaswws said:

    Приветствую Вас господа! Предлагаем Вашему вниманию замечательный сайт для заказа бурения скважин на воду. Бурение скважин в Минске компанией АКВАБУРсервис – полный комплекс качественных и разумных по цене услуг. Заказывайте скважину для воды в АКВАБУРсервис – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Наша сфера деятельности — проектирование и бурение скважин на воду, установка любого насосного оборудования, монтаж систем канализации всех видов, дренажей, ливневых систем и др.Миссия компании: мы добываем чистую воду – источник всего живого на Земле, и делаем ее доступной людям. Самый короткий срок, за который мы пробурили и обустроили скважину, — 1 час 36 минут. Мы ценим время своих клиентов и гордимся, что оперативность — отличительное свойство наших услуг. Мы показываем, насколько быстро и качественно может происходить бурение скважины.
    https://drive.google.com/file/d/1Y0zYtrRCia9jfU-BH3WPIbhph6HvwDRl/view?usp=sharing
    От всей души Вам всех благ!

    December 16, 2020
    Reply
  3. Antoniokjk said:

    Приветствую Вас дамы и господа! Предлагаем Вашему вниманию интересный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! В результате работ по бурению: все работает вне зависимости от поры года, зимой вода не замерзает; внутрь не попадут грунтовые и стоковые воды или посторонние предметы; вода бесперебойно поставляется из подземного водоносного слоя. Обустройство скважин на воду в Минске. В рамках комплекса наших услуг в Минской области мы также определяем динамический и статический уровень воды в скважине. Заключительный этап — подведение воды по трубопроводу. С этой целью мы устанавливаем мембранный бак, куда закачивается вода. Объем закачиваемой воды и, соответственно, объем бака зависит от того, сколько требуется воды в данном домохозяйстве или на данном объекте. Дальнейшее распределение воды по помещениям происходит уже из этого бака. После того, как вода подана, по желанию заказчика можно установить водоочистные системы различной сложности, отопительные и водонагревательные системы и системы автоматического управления. Более подробная информация размещена тут https://drive.google.com/file/d/12UGUi1eb4vB_-VAklwchUhrlKM8233go/view?usp=sharing
    От всей души Вам всех благ!

    December 17, 2020
    Reply
  4. Ruslanwdd said:

    Доброго времени суток дамы и господа!
    Предлагаем Вашему вниманию изделия из стекла для дома и офиса. Наша организация работает 10 лет на рынке этой продукции в Беларуси. Изготовим для вас и установим душевую кабину из стекла на заказ. Профессиональные замерщики и монтажники. Мы используем различные типы материалов и фурнитуры для создания душевых кабин и душевых перегородок любого дизайна и конструкции, устанавливаем на поддоны или без поддонов. У нас вы сможете заказать стекло для душевой кабины по индивидуальным размерам и проекту. Выполним доставку изделия и его монтаж.
    Более подробная информация размещена https://drive.google.com/file/d/13CAPanRKgpkKCcaHzI0EiaMtWM0saPJO/view?usp=sharing

    January 20, 2021
    Reply
  5. Duglasuka said:

    Доброго времени суток дамы и господа! https://drive.google.com/file/d/14O9w55SwmlE2-tlnmfFQS62GmpBmQNET/view?usp=sharing
    Ремонт сделан, но сколько сил нужно потратить на уборку после него! Люди просто теряются при виде гор строительного мусора и заляпанных окон и дверей.Уборка после ремонта требует опыта, убирать нужно аккуратно, чтобы не испортить дорогой ремонт и не повредить элементы дизайна нового интерьера. Стоит задуматься и о том, сколько денег придется потратить на уборку после ремонта своими силами: закупка необходимых чистящих и моющих средств, а также защита от пыли и вредного воздействия химических веществ (перчатки, респираторы, укрывные материалы, не говоря уже об одежде). Ведь многие страдают аллергией, а испорченную кожу рук после работы с агрессивными материалами быстро не восстановить. Особую сложность представляет собой уборка помещений после ремонта, если мебель из них не выносилась. Даже если все было тщательно укрыто, пыль проникла везде, в каждую щель. Для осуществления такой уборки требуется специальное оборудование, а ковры и мебель желательно не просто пропылесосить, но и помыть.

    January 27, 2021
    Reply
  6. Duglasmfi said:

    Добрый день друзья! https://drive.google.com/file/d/14O9w55SwmlE2-tlnmfFQS62GmpBmQNET/view?usp=sharing
    Фирма по уборке помещений «LADYCLEAN» более 5 лет оказывает качественные услуги в Минске. Сотрудники компании — опытные профессионалы, готовые осуществить уборку жилых помещений, промышленных площадей, офисов. Наша клининг компания наведет порядок там, где Вы пожелаете. Клининг компания «LADYCLEAN» проводит самый широкий спектр услуг среди тех, которые могут предложить клининговые компании в Минске. Мы привлекаем клиентов не только качеством услуг, но и их доступной стоимостью. Мы работаем на конкурентном рынке, поэтому наша клининговая компания цены делает привлекательными для каждого клиента. Высокий уровень качества услуг достигается тем, что мы используем в работе новые качественные технические приспособления и используем безвредные чистящие средства.

    January 28, 2021
    Reply
  7. Donaldxak said:

    Здравствуйте товарищи
    Канализация Компания Буртехсервис выполняет полный комплекс работ по водоотведению в частных домах Минска и Минской области. В качестве септика используем бетонные кольца – это самый надежный и долговечный вариант монтажа канализации среди существующих сегодня.
    Монтаж канализации в частном доме. Установка септика
    Установка септика из бетонных колец проводится по следующим этапам:
    Подготовка. Расчет количества бетонных колец в зависимости от количества проживающих в доме. Выбор места – септик должен располагаться на расстоянии более 5 метров от дома и не меньше 50 метров от водозаборной скважины.С помощью экскаватора выкапывается 2 котлована для будущих колодцев-резервуаров и траншея для прокладки труб до дома.С помощью спецтехники опускают бетонные кольца одно за другим на дно каждого котлована. Для формирования одного резервуара требуется три кольца. Стандартная высота бетонного кольца составляет 90 см. Первый резервуар будет выполнять роль очистного сооружения, второй – фильтрационный.В траншею закладывается канализационная труба. Трубопровод прокладывают под определенным углом наклона. Это позволяет избежать засоров в трубопроводе, образующихся в местах поворотов и изгибов во время передвижения к септику нечистот и отработанной воды.В резервуарах пробивают отверстия под канализационную трубу и перелив. Монтаж очистной системы.На третье бетонноеСтыки бетонных колец герметизируют цементным раствором.В качестве люков на резервуары устанавливают полимерные крышки.Засыпают землей оставшееся пространство, выравнивают.Обустройство системы водоотведения завершено.
    Стоимость обустройства и монтажа канализации
    Стоимость монтажа канализации зависит от глубины вырываемого котлована, количества бетонных колец и начинается от 1000 рублей.
    Установка септика из бетонных колец обеспечит Вам надежность и подарит комфортную жизнь в Вашем доме!
    Компания Буртехсервис не только выполняет комплекс работ по водоотведению (монтажу канализации), но и осуществляет сервисное обслуживание установленных септиков.

    February 1, 2021
    Reply
  8. Antonioflk said:

    Доброго времени суток господа!Есть такой интересный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Специалисты нашей компании оказывают следующие виды услуг: Грамотный подбор канализационной системы с учётом специфических требований и условий вашего домовладения. Доставка, установка и наладка канализации на даче / в загородном доме / коттедже. Канализация в Минской областиКанализации автономного типа, представляют собой удобные, надёжные и простые в эксплуатации установки, позволяющие очищать и утилизировать сточные воды. Наше канализационное оборудование подходит для эксплуатации во всех климатических зонах Беларуси и производится с учётом разнообразного и местами сурового климата нашей страны. Компания «ЕвроБурСервис» предлагает широкий ассортимент локальных канализационных установок, предназначенных для очистки хозяйственно-бытовых сточных вод. Наша компания занимается любыми коммуникациями для загородных домов, дач, коттеджей. Работаем в Минске, Минской области, в радиусе 200км от Минска. Более подробная информация размещена тут https://drive.google.com/file/d/12UGUi1eb4vB_-VAklwchUhrlKM8233go/view?usp=sharing
    От всей души Вам всех благ!

    February 9, 2021
    Reply
  9. Duglasdtt said:

    Добрый день товарищи! https://drive.google.com/file/d/14O9w55SwmlE2-tlnmfFQS62GmpBmQNET/view?usp=sharing
    Уборка квартир в Минске – услуга, которую мы предоставляем комплексно. Важную составляющую комфорта и уюта в квартире – порядок и чистоту, доверяют нам как профессионалам в клининговых услугах. Конечно, хочется минимизировать время и силы, потраченные на уборку и при этом сделать так, чтобы квартира «заблестела». Мы предлагаем быструю уборку в комнатах, на кухне, в санузле и коридоре безопасными моющими средствами! Наша команда специалистов справляется с любыми «особенностями» квартир. Даже запущенное состояние помещений не помешает нашим специалистам добиться 100% чистоты. Мы справляемся с работой вне зависимости от площади объекта и сложности уборки за счет использования специализированных средств и подбора наиболее оптимальных технологий уборки. В среднем процесс занимает 2-3 часа!

    February 11, 2021
    Reply
  10. Duglassfr said:

    Добрый день товарищи! https://drive.google.com/file/d/14O9w55SwmlE2-tlnmfFQS62GmpBmQNET/view?usp=sharing
    Фирма по уборке помещений «LADYCLEAN» более 5 лет оказывает качественные услуги в Минске. Сотрудники компании — опытные профессионалы, готовые осуществить уборку жилых помещений, промышленных площадей, офисов. Наша клининг компания наведет порядок там, где Вы пожелаете. Клининг компания «LADYCLEAN» проводит самый широкий спектр услуг среди тех, которые могут предложить клининговые компании в Минске. Мы привлекаем клиентов не только качеством услуг, но и их доступной стоимостью. Мы работаем на конкурентном рынке, поэтому наша клининговая компания цены делает привлекательными для каждого клиента. Высокий уровень качества услуг достигается тем, что мы используем в работе новые качественные технические приспособления и используем безвредные чистящие средства.

    February 12, 2021
    Reply
  11. Antonioviq said:

    Приветствую Вас друзья!Предлагаем Вашему вниманию интересный сайт для заказа бурения скважин на воду. Заказывайте скважину для воды в ЕВРОБУРСЕРВИС – получите доступ к экологически чистой природной воде по самым выгодным в Минске ценам! Специалисты нашей компании оказывают следующие виды услуг: Грамотный подбор канализационной системы с учётом специфических требований и условий вашего домовладения. Доставка, установка и наладка канализации на даче / в загородном доме / коттедже. Канализация в Минской областиКанализации автономного типа, представляют собой удобные, надёжные и простые в эксплуатации установки, позволяющие очищать и утилизировать сточные воды. Наше канализационное оборудование подходит для эксплуатации во всех климатических зонах Беларуси и производится с учётом разнообразного и местами сурового климата нашей страны. Компания «ЕвроБурСервис» предлагает широкий ассортимент локальных канализационных установок, предназначенных для очистки хозяйственно-бытовых сточных вод. Наша компания занимается любыми коммуникациями для загородных домов, дач, коттеджей. Работаем в Минске, Минской области, в радиусе 200км от Минска. Более подробная информация размещена тут https://drive.google.com/file/d/12UGUi1eb4vB_-VAklwchUhrlKM8233go/view?usp=sharing
    Увидимся!

    February 18, 2021
    Reply
  12. Antoniowwl said:

    Добрый день дамы и господа!
    Предлагаем Вашему вниманию высококачественные профессиональные плёнки. Наша организация”ООО Защитные плёнки” работает 15 лет на рынке этой продукции в Беларуси. С помощью оконных пленок мы превращаем хрупкое стекло в новый строительный материал, сочетающий такие свойства как прочность, термоизоляцию, солнцезащиту и современный внешний вид. Высокое качество тонировочных, защитных, декоративных и солнцезащитных пленок позволяет нам давать заказчикам и партнерам гарантии долговечности и надежности. Тонировка стекла и окон позволяет дозировать свет и солнечную энергию — в помещении, находящемся под защитой тонированного стекла, сохраняется оптимальная температура. С помощью оконных пленок можно воплотить в жизнь любую архитектурную идею.
    Более подробная информация размещена https://drive.google.com/file/d/1hceZWkDFW4mFU9sDZ64bQAi3ss41Fo5g/view?usp=sharing
    С уважением,коллектив “ООО Защитные плёнки”.

    February 22, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *