Angularjs 的搜索输入框插件angucomplete-alt使用

摘要: 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>