微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐