AngularJS 实现的输入自动完成补充功能
1.首先需要引入:angucomplete.js第三方库
2.增加model :
var app = angular.module('app', ["angucomplete"]);
3.html:
<angucomplete id="ex1" placeholder="搜索"
pause="100" selectedobject="selectedContacts"
localdata="contactList" searchfields="contactName"
titlefield="contactName" minlength="1"
inputclass="form-control"
matchclass="highlight"/>
4.js:
$scope.contactList = [
{contactName: '张三', pic: 'assets/img/avatar1.jpg'},
{contactName: '李四', pic: 'assets/img/avatar2.jpg'},
{contactName: '王五', pic: 'assets/img/avatar3.jpg'},
{contactName: '赵六', pic: 'assets/img/avatar1.jpg'},
{contactName: '张三', pic: 'assets/img/avatar1.jpg'},
{contactName: '李四', pic: 'assets/img/avatar2.jpg'},
{contactName: '王五', pic: 'assets/img/avatar3.jpg'},
{contactName: '赵六', pic: 'assets/img/avatar1.jpg'}
];
5.地址为angucomplete.js第三方库gitHub地址:https://github.com/darylrowland/angucomplete/blob/master/angucomplete.js
AngularJS 实现的输入自动完成补充功能的更多相关文章
- 用jQuery的ajax的功能实现输入自动提示的功能
注意事项:要使用jQuery首先要把它的包引用进来( <script type="text/javascript" language="javascript&quo ...
- jquery 实现邮箱输入自动提示功能:(二)
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jquery 实现邮箱输入自动提示功能:(一)
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- jQuery实现用户输入自动完成功能
jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...
- 如何为 .NET Core CLI 启用 TAB 自动补全功能
如何为 .NET Core CLI 启用 TAB 自动补全功能 Intro 在 Linux 下经常可以发现有些目录/文件名,以及有些工具可以命令输入几个字母之后按 TAB 自动补全,最近发现其实 do ...
- PHP自动加载功能原理解析
前言 这篇文章是对PHP自动加载功能的一个总结,内容涉及PHP的自动加载功能.PHP的命名空间.PHP的PSR0与PSR4标准等内容. 一.PHP自动加载功能 PHP自动加载功能的由来 在PHP开发过 ...
- [Android Pro] Android 4.1 使用 Accessibility实现免Root自动批量安装功能
reference to : http://www.infoq.com/cn/articles/android-accessibility-installing?utm_campaign=info ...
- Eclipse自动补全功能和自动生成作者、日期注释等功能设置
修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以 ...
- Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件
本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框. Eclipse代码自动补全功能默认只包括 点"." ,即只有输入”." ...
随机推荐
- J2EE MyBatis使用
MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .20 ...
- 解决xcode6_beta没有代码提示的方法
在beta版本的xcode6中我们会发现代码提示不怎么好使,但是看一些老外的视频,他们的代码提示却又是赶赶的.这是为什么呢?其实解决办法也很简单.就是在项目中不出现中文字符就好了.有的同学说,我没用中 ...
- SQL 基本的函数
select * from emp;
- java中Date的getTime() 方法奇葩问题
今天遇到了一个奇葩问题: 从数据库中读取了3个Date类型的数据: DATE1:2015-03-12 12:10:42 DATE2:2015-03-12 12:04:40 DATE3:2015-03- ...
- ligerui_ligerTree_003_配置url参数,加载“树”
配置url参数,加载“树”: 源码下载地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图:json.txt HTML代码: < ...
- spark streaming - kafka updateStateByKey 统计用户消费金额
场景 餐厅老板想要统计每个用户来他的店里总共消费了多少金额,我们可以使用updateStateByKey来实现 从kafka接收用户消费json数据,统计每分钟用户的消费情况,并且统计所有时间所有用户 ...
- paper 24 :matlab的cat函数
cat:用来联结数组 用法:C = cat(dim, A, B) 按dim来联结A和B两个数组. C = cat(dim, A1, A2, A3, ...) 按dim联结所有输入的数 ...
- Linux 安装 nginx注意
./configure --prefix=/usr/local/nginx TO ./configure --prefix=/usr/local/nginx --conf-path=/usr/loca ...
- 夺命雷公狗---Thinkphp----16之首页的完成及全站的完成
刚才我们首页只是完成了一部分的数据,那么这里我们就来将他所以的完成: IndexController.class.php控制器代码如下所示: <?php namespace Home\Contr ...
- PAT乙级 1021. 个位数统计 (15)
1021. 个位数统计 (15) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一个k位整数N = dk-1 ...