簡單3步驟，在 Laravel5 中使用 jQuery UI Autocomplete

public function autocomplete() { 
   $term = Input::get('term'); 
   $queries = Product::where('Name', 'LIKE', '%'.$term.'%')->get(); 
   $results = array(); 
   foreach ($queries as $query) { 
     $results[] = ['value' => $query -> Name]; 
   } 
   return Response::json($results); 
}

Autocomplete其實是一個很方便的功能，尤其是在資料很多的時候，這個功能可以依照使用者輸入的文字自動篩選資料出來，讓使用者方便點選，其實大家應該很常看到這個功能，因為在Google搜尋框進行搜尋時，下面就會帶出較常被搜尋的文字，這個功能就叫autocomplete。

jQuery UI的autocomplete功能在一般的html或是php檔案中，使用上蠻簡單的，但要移植到laravel著實也花了我一些時間，以下是實作的步驟重點： 

在laravel中實作autocomplete，程式撰寫主要分為以下三塊：

在Controller中新增autocomplete函式 設定route jQuery程式撰寫 新增autocomplete函式

在需要使用autocomplete功能的controller中(例如ProductController)，新增一個函式(函式名可以自訂，在此我還是用autocomplete來命名，大家會比較清楚)

程式碼

稍微說明一下以上程式，第一行是取得autocomplete的網址列參數，這裡使用Input::get('term');，要注意的是「term」這個參數的名字是不能更改的(因為jquery ui就是用這個名稱)，然後根據$term這個變數篩選出資料，再跑個迴圈存到$result陣列中，再將$result陣列用json格式回傳出去。

第二個要注意的地方是$results[] = ['value' => $query -> Name];，其中「value」也是不可變的參數名，若是改成其他的名字，Jquery參數中的source就無法讀取到陣列的值。

設定route

程式碼

Route::get('autocomplete','ProductController@autocomplete');

Route設定很單純，使用get方法設定route連結指定連至ProductController的autocomplete函式即可 

jQuery程式撰寫

程式碼

$("#ProductName").autocomplete({ 
   source: "{{url('autocomplete')}}", 
   dataType: 'json', minLength: 1, 
   select: function(e, ui) { 
     $('#ProductName').val(ui.item.value); 
   } 
});

此部分程式碼比較不同的是source參數不是直接打資料，而是改成用blade語法帶出url，連結至autocomplete函式，另外要加上select:function，把陣列中的「value」值傳給input欄位。 

雖然說是簡單3步驟，但其實也耗了不少時間才知道原來不能改jquery的參數，希望這篇文章可以讓大家少浪費一些try error的時間。