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

最新推荐文章于 2024-11-08 11:53:48 发布

转载最新推荐文章于 2024-11-08 11:53:48 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2329222/blog/860780

文章标签：

#javascript #ViewUI

本文介绍如何在AngularJS项目中使用angucomplete-alt插件实现输入提示功能。文章详细描述了插件的安装步骤、配置方法及常见问题解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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