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. java web工程读取及修改配置文件

    这篇博客比自己讲解的详细: http://blog.sina.com.cn/s/blog_69398ed9010191jg.html 使用方法: 1)配置文件在web-info的class目录下,或者 ...

  2. DLL项目报错:fatal error lnk1104: cannot open file "...\xxx.dll"

    在生成DLL的时候报这个错, 生成不了DLL 检查生成DLL的路径是否有其他程序在使用... 或者把杀毒软件关了试试...

  3. C#线程系列讲座(3):线程池和文件下载服务器

    如果设计一个服务器程序,每当处理用户请求时,都开始一个线程,将会在一定程序上消耗服务器的资源.为此,一个最好的解决方法就是在服务器启动之前,事先创建一些线程对象,然后,当处理客户端请求时,就从这些建好 ...

  4. sqlplus登陆

    cd \sqlplus sys@test_id as sysdba 切换用户SQL> connect system@test_id

  5. linux:主机规划和磁盘分割

    1>.在linux系统中,每个装置都被装成一个档案来对待: 2>.各硬体装置在linux当中的档案名:SATA介面的硬碟的档案名为/dev/sd[a-d];在linux中,几乎所以的硬体装 ...

  6. 操作系统:进程管理和IO控制

    一.进程管理 进程管理包括进程控制,进程调度,进程同步与通信,死锁控制四个内容. (一)进程控制 进程是操作系统中运行的基本单位,包括程序段,数据段和进程控制段.操作系统通过进程控制块(PCB)管理进 ...

  7. PostgreSQL simple select(group by and insert into ...select)

    warehouse_db=# create table student(number int primary key,name varchar(20),age int);CREATE TABLEwar ...

  8. jQuery Ajax 简单的实现跨域请求

    html 代码清单: <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1 ...

  9. sql ROUND() 函数三个参数的含义

    ROUND的格式:ROUND(p1,p2,p3),其作用是取四舍四入值P1:要被四舍五入的数字P2:保留的小数位数P3:如果为0或不输入,则表示进P1进入四舍五入,如ROUND(123.86,1) = ...

  10. linux-统计一个文件中出现的单词数

    #!/bin/bash ] then echo "Usage: $0 filename"; exit - fi filename=$ egrep -o "\b[[:alp ...