Angularjs 的搜尋輸入框外掛angucomplete-alt使用
最近在使用angularjs開發頁面功能的時候有使用到angucomplete-alt外掛,
在此簡單寫下它的用法:
1)從git上下載它到本地plugins目錄;
2)在jsp頁面中引入angucomplete-alt.js檔案;
3)在宣告app的時候將'angucomplete-alt'加入到module中
var homePageApp = angular.module('homePageApp', ['ui.router','pager','ngDialog','daterangepicker','ngMessages','angucomplete-alt'
4)在html檔案中加入內容,因為我需要輸入內容到後臺去做查詢因此需要在remote-url中指定後臺get請求的地址(似乎只能用get),備註:這塊使用的相對路徑,因為我發現在程式裡頭用絕對路徑是報錯的。
<angucomplete-alt id="appName"
pause="300"
placeholder="服務名稱"
selected-object="selectedAppName"
title-field="appName"
ng-model="appName"
input-name="appName"
minlength="1"
remote-url="../../services/selectAppIdAndAppName?appName="
remote-url-request-formatter="remoteUrlRequestFn"
input-class="form-control"
match-class="highlight" />
/ *
* @Title: selectAppIdAndAppName
* @Description: TODO(這裡用一句話描述這個方法的作用)
* @param @return 引數
* @return Respond 返回型別
* @throws
*/
@RequestMapping(value = "/selectAppIdAndAppName", method = RequestMethod.GET)
public @ResponseBody Respond selectAppIdAndAppName(@RequestParam String appName) {
Respond resp = new Respond();
resp = servicesService.selectAppIdAndAppName(appName);
return resp;
}
我這裡先根據remote-url 以及輸入的內容做了一次模糊匹配來查出相關列表,然後再選中某一項的時候呼叫selected-object中對應的方法selectedAppName
以上是我對這個外掛的使用情況。。。。歡迎補充,具體屬性以及使用方法,請參考git
備註:
其實我再使用的過程中,修改資料的時候回顯值直接用ng-model不會顯示出來,查了好久後來從官方的example中找到了
在此附上程式碼
// selectedAppName 對應selected-object,appName為對應的title-field
$scope.selectedAppName = {appName:'hello'};
<div angucomplete-alt id="appName"
pause="300"
placeholder="服務名稱"
selected-object="selectedAppName"
initial-value="selectedAppName"
title-field="appName"
ng-model="appName"
input-name="appName"
minlength="1"
remote-url="../../services/selectAppIdAndAppName?appName="
remote-url-request-formatter="remoteUrlRequestFn"
input-class="form-control"
match-class="highlight" ></div>