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代码自动补全功能默认只包括 点"." ,即只有输入”." ...
随机推荐
- 无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件。您在安装 VMware Workstation 后是否进行了重新引导?
解决方法宿主机中执行如下命令重新启动: net start vmci net start vmx86 net start VMnetuserif sc config vmci=auto sc conf ...
- Java IO读取文件之二
package com.lf.iopreoject; import java.io.BufferedReader; import java.io.File; import java.io.FileIn ...
- Spring boot中使用springfox来生成Swagger Specification小结
Rest接口对应Swagger Specification路径获取办法: 根据location的值获取api json描述文件 也许有同学会问,为什么搞的这么麻烦,api json描述文件不就是h ...
- Java基础之一组有用的类——使用正则表达式搜索子字符串(TryRegex)
控制台程序. 正则表达式只是一个字符串,描述了在其他字符串中搜索匹配的模式.但这不是被动地进行字符序列匹配,正则表达式其实是一个微型程序,用于一种特殊的计算机——状态机.状态机并不是真正的机器,而是软 ...
- JAVA-环境部分
JAVA环境 1.jdk 1.从Oracle网站下载安装包(32位.64位) 2.安装目录不用中文或空格 3.配置环境变量 1作用:提供jdk存放位置信息 2系统环境变量 1增加-JAVA_HOME= ...
- SQL 数据库 存储过程 视图
一.存储过程 1.概述 存储过程是一组编译在单个执行计划中的T-SQL语句 存储过程:就像函数一样的会保存在数据库中(可编程性) 存储过程的优点: 1.允许模块化程序设计 2.允许更快执行如果某操作需 ...
- oracle触发器书写方法
CREATE SEQUENCE 序列名[INCREMENT BY n] --每次加几[START WITH n] --序列从几开始[{MAXVALUE/ MINVALUE n|NOMAXVALUE}] ...
- 转:python webdriver API 之下拉框处理
下拉框也是 web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位,我们在前面的例子中已经有过使用,下面通过 ...
- UI design principles
Master's conclusion: 1. fix a color pattern 2. fix the frames the UI will use 3. fix the subject tha ...
- mac office
弄了个office2016正式版的教程,大多数朋友表示搞不懂,SO重新写了个超级详细的,在不懂我也是醉了.Mac office 2016免费安装教程微软近日正式向 Office 365 订阅用户发布了 ...