Laravel'de autocomplete kullanmak istediğimiz zaman bunun birden fazla kullanım yöntemi mevcut. Ben daha önceleri bunu Jquery aracılığı ile manuel bir şekilde çözüyordum.

Fakat araştırırken typehead diye bir güzelliğin olduğunu keşfettim :) ve bunu laravelde kullandım.


Öncelikle neden typehead kullanmalıyız ?


Büyük verilerle çalışırken, örneğin ülkeler listesinden ülke seçmeniz gerekiyor. Tüm ülkelerin bir dizi içerisinde ya da veritabanındaki ülkeler tablosunda olduğunu varsayıp bunun hepsini bir kerede sayfada göstermek istediğimizde sayfanın yüklenme hızı düşer.

Bu sayfa yükleme hızını yavaşlatmaması için autocomplete işlemi yapıyoruz. Bu autocomplete işlemini de manuel yapmak yerine typehead ile hızlı bir şekilde çözüyoruz.

Laravel projesinin kurulu olduğunu varsayıp anlatmaya hızlıca başlıyorum !


Öncelikle gerekli route parametrelerimi oluşturuyorum. Bunu 2 farklı route üzerinde yapacağım.

1.si form göstermek için

2.si ise autocomplete in yapılacağı controller ve methodu. (ben şuan get methodu kullanacağım. isterseniz post ile de kullanabilirsiniz token ile birlikte).

Route::get('search','SearchController@index')->name('search');
Route::get('autocomplete','SearchController@autocomplete')->name('autocomplete');

Rotalarımı oluşturduktan sonra Controller sayfama gidip view'ı göstereceğim methodu yazıyorum.


public function index()
    {
        return view('autocomplete.form');
    }


Burada sadece view oluşturuyorum. Daha sonra view'ımın içine gelip gerekli view'ı yazıyorum.

Ben projeme bootstrap, jquery ve kullanacağım typehead CDNlerini çekeceğim. Siz isterseniz bunları indirip dosya olarak da çekebilirsiniz. View kodlarımı yazıyorum.


<!DOCTYPE html>
<html lang="en">
<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">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <title>Autocomplete Application</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                    <h4>Search </h4>
                    <input type="text" id="search" class="form-control typehead" name="search" placeholder="Müşteri adını giriniz">
                    <div class="div">
                    </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

    <script type="text/javascript">
        /* Typehead ekleyeceğimiz alan */
    </script>
    
</body>
</html>


Size view sayfasını açıklayayım, ben bu projede bootstrap 3 kullandım, bu yüzden bootstrap 3 css ve js cdn lerini dahil ettim.

Buna ek olarak gördüğünüz üzere typehead cdn ini de çekmiş bulunmaktayım.


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>


Şimdi yukarıda typehead için ayırdığımız alana typehead kodlarımızı ekleyelim.


var path = "{{ url('autocomplete') }}";
        $('.typehead').typeahead({
            minLength: 2,
            showHintOnFocus:true,
            source:  function (query, process) {
            return $.get(path, { query: query }, function (data) {
                    return process(data);
                });
            },
            displayText: function (data) {
                return data.name+"  - "+data.street;
            },
            afterSelect: function (data) {
                console.log(data.id);
                $('.div').text(data.street);
            }
        });


Öncelikle işlemi yapacağımız adresi bir değişken içerisine alalım. route name ile belirttiğim autocomplete route'u kullanacağız.

Controller'a gitmeden önce size typehead üzerinde kullandığım parametreleri ve ne işe yaradıklarını anlatayım.


minLength: Bu alan kaç karakterden sonra sayım işleminin yapılacağını belirleyen alandır.


showHintOnFocus: bu alan ise input'un içerisine tıklandığı zaman bir yazı yazılmadan altta belli bir miktar veri gösterir, ipucu vermek amacıyla kullanılır.


source: typehead içerisinde gösterilen kaynağı belirtir, biz burada göstereceğimiz verileri ajax get ile alacağımız için geriye ajax getteki adresimizi göndürüyoruz, bizim process işlemimiz bu olmuş oluyor.


displaytext: Bu parametre, typhead'de her tuşa bastığımızda karşılığı olan veri var ise ekranda hangi alanlarının görüneceğini belirtir, ben burada bir adres defterinden adres listeleyeceğim için istiyorum ki adres adı ve adres sokağı görünsün. Örneğin listelenecek veri : Tesla - 33 Herbert st.


afterSelect: Bu parametre ise karşımıza çıkan verilerden herhangi birisini seçtikten sonra yapılacak işlemi belirtir. Örneğin ben örnek kodlarda console.log a tıkladığım verinin id sini göstermişim, aynı zamanda .div class'ına sahip bir div içerisindeki yazıya caddenin ismini yazacak.


Gelelim controller'da yapılacak olan işlemlere.

Controller üzerinde ise typehead ile gönderdiğimiz parametreleri kullanacağız.


public function autocomplete(Request $request)
    {
        $result= Addresses::select('id','name','street')
            ->where('name', 'LIKE', "%{$request->input('query')}%")
            ->orWhere('street','LIKE',"%{$request->input('query')}%")
            ->get();
        
        return response()->json($result);
    }


Burada belirtmiş olduğum kodda addresses modelini kullanarak formdan gelen query ismindeki requesti sorguya alıp kullanıyorum. Ve her bir tuşa bastığımda buradaki istek gerçekleşip çıkan sonuçları json olarak göndürüyor.




Resimde gördüğünüz üzere "Tesl" yazdığımda otomatik olarak açılır menü şeklinde karşımıza veri geliyor.

Umarım faydalı olmuştur.


İyi çalışmalar !