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

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

2015-12-25 Tags: Laravel 5.0 PHP

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的時間。 

 

 






林靜君 (Kemie Lin)

擁有多項軟體操作能力,擅長需求分析、行銷網站規劃、專案執行,在課程規劃與軟體教學亦有7年以上豐富經驗。

最厲害的能力是將天馬行空的創意想法轉換成技術執行策略,

現任廣瞻互動媒體設計公司專案總監/健行科技大學 網頁實戰、市場數據分析&Android實務開發班講師