最近在使用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>