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 实现的输入自动完成补充功能的更多相关文章

  1. 用jQuery的ajax的功能实现输入自动提示的功能

    注意事项:要使用jQuery首先要把它的包引用进来( <script type="text/javascript" language="javascript&quo ...

  2. jquery 实现邮箱输入自动提示功能:(二)

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  3. jquery 实现邮箱输入自动提示功能:(一)

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  4. jQuery实现用户输入自动完成功能

    jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...

  5. 如何为 .NET Core CLI 启用 TAB 自动补全功能

    如何为 .NET Core CLI 启用 TAB 自动补全功能 Intro 在 Linux 下经常可以发现有些目录/文件名,以及有些工具可以命令输入几个字母之后按 TAB 自动补全,最近发现其实 do ...

  6. PHP自动加载功能原理解析

    前言 这篇文章是对PHP自动加载功能的一个总结,内容涉及PHP的自动加载功能.PHP的命名空间.PHP的PSR0与PSR4标准等内容. 一.PHP自动加载功能 PHP自动加载功能的由来 在PHP开发过 ...

  7. [Android Pro] Android 4.1 使用 Accessibility实现免Root自动批量安装功能

    reference to  :  http://www.infoq.com/cn/articles/android-accessibility-installing?utm_campaign=info ...

  8. Eclipse自动补全功能和自动生成作者、日期注释等功能设置

    修改作者.日期注释格式:打开Windows->Preferences->Java->Code Style->Code Templates,点击右边窗口中的Comments,可以 ...

  9. Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件

    本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框.   Eclipse代码自动补全功能默认只包括 点"."  ,即只有输入”." ...

随机推荐

  1. 并发调用get请求

    http://zeusami.iteye.com/blog/1172864 package com.alibaba.xteam.web.travel.module.rpc; import java.i ...

  2. zabbix监控linux文件的一个目录大小

    监控linux文件的一个目录大小 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.       欢迎加入:高级运维工程师之路 598432640 我们知道,Linux自带的一些监控模板 ...

  3. 经常遇到Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be e

     遇到问题描述: 运行android程序控制台输出 [2012-07-18 16:18:26 - ] The connection to adb is down, and a severe error ...

  4. 服务器 CentOS上yum安装Nginx服务

    一.更改yum源为网易的源加快速度 vi /etc/yum.repos.d/CentOS-Base.repo 更改内容如下 # CentOS-Base.repo # # This file uses ...

  5. bzoj3437 小P的牧场

    斜率优化dp 代码 #include<cstdio> #include<algorithm> using namespace std; typedef long long ll ...

  6. linux for java programer

    http://www.kancloud.cn/digest/javaxviii/126781 .查找文件 find / -name filename.txt根据名称查找/目录下的filename.tx ...

  7. php 迭代器

    迭代器(Iterator)模式,又叫做游标(Cursor)模式.GOF给出的定义为:提供一种方法访问一个容器(container)对象中各个元素,而又不需暴露该对象的内部细节. 百度百科: http: ...

  8. 3D语音天气球(源码分享)——通过天气服务动态创建3D球

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 开篇废话: 这个项目准备分四部分介绍: 一:创建可旋转的"3D球":3 ...

  9. Maven打jar包

    <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...

  10. Java高效编程之三【类和接口】

    本部分包含的一些指导原则,可以帮助哦我们更好滴利用这些语言元素,以便让设计出来的类更加有用.健壮和灵活. 十二.使类和成员的访问能力最小化 三个关键词访问修饰符:private(私有的=类级别的).未 ...