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>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...