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代码自动补全功能默认只包括 点"." ,即只有输入”." ...
随机推荐
- maven 一好用的仓库镜像
<mirror> <id>ibiblio.org</id> <name>ibiblio Mirror of http://repo1.maven.org ...
- 查看oracle数据库中的保留字
SQL> select * from v$reserved_words;
- Private strand flush not complete
当切换日志的时候,所有private strands的内容都会被flush到当前的日志中,然后日志切换才可以完成. strand是在oracle 10g中引入的新术语,和redo的latches相关. ...
- Lintcode: Permutation Index II
Given a permutation which may contain repeated numbers, find its index in all the permutations of th ...
- acm算法模板(5)
STL 中 sort 函数用法简介 做 ACM 题的时候,排序是一种经常要用到的操作.如果每次都自己写个冒泡之类的 O(n^2) 排序,不但程序容易超时,而且浪费宝贵的比赛时间,还很有可能写错. ST ...
- javascript创建对象的方法总结
Javascript创建对象 最简单的方法:创建object实例. var person=new Object(); person.name="Joey";person.age=2 ...
- $.getJSON异步请求和同步请求
先说一下我遇到的问题吧,我之前的一个函数想调用上一个函数的返回值,但是它的返回值一直为空,后来翻了一些资料才明白是异步请求在作怪,不多说,看例子,这是我之前有返回值函数的代码: function ge ...
- linux centos5.7(32bit) oracle 10g oracle11g
cenOS5.5安装oracle10g(傻瓜篇) http://www.cnblogs.com/fnng/archive/2012/06/19/2554159.html (转) 在cenOS5.5上 ...
- java 中 equals和==的区别
public static void main(String[] args) { int n=0; int m=0; System.out.println(n==m); String str = ne ...
- 系统配置SQL profile
select M.RESPONSIBILITY_NAME, B.PROFILE_OPTION_NAME, X.USER_PROFILE_OPTION_NAME, t.profile_option_va ...