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>