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. ios之无限 自动 图片轮播器的实现

    比较之前发布的手动无限图片轮播器进行了改进.实现了自动无限轮播的功能.比较适合团购标题分类下面的轮播器功能. 实现思路: * 开启一个定时器,把操作放入消息循环池.每隔一定时间,操作执行一次. * 注 ...

  2. 成员变量的隐藏,方法的覆盖,super关键字

    成员变量的隐藏:当父类和子类有相同的成员变量时,即定义了与父类相同的成员变量时,就会发生子类对父类变量的隐藏.对于子类的对象来说,父类中的同名成员变量被隐藏起来,子类就会优先使用自己的成员变量,父类成 ...

  3. vmware vcenter appliance dhcp 改为 静态IP导致web service认证失败

    参考 http://www.davidhill.co/2012/09/failed-to-connect-to-vmware-lookup-service/ Failed to connect to ...

  4. SQL Server 2012大数据导入Oracle的解决方案

    在实际工作中需要把SQL Server中的表导入Oracle.之前尝试过直接用SQL Server的DTS进行都没问题.但这次因为数据量在千万级所以报虚拟内存不足.最后通过SQL Server导出tx ...

  5. sqlserver中索引优化

    背景: MRO表中TimeStamp nvarchar(32),但实际上它存储的内容是日期(2015-09-09 11:20:30). 现在我要执行这样一个sql语句: Select t10.* fr ...

  6. org.apache.ibatis.builder.IncompleteElementException: Could not find parameter map

    mybatis 出现这个错误是 参数类型写错了.parameterType 写成了parameterMap

  7. Effective C++ 3.资源管理

    //条款13:以对象管理资源 // 1.C++程序中最常使用的资源就是动态分配内存,并且还包括文件描述器,互斥锁,GDI对象.数据库连接.网络socket等.不管哪一种资源,当不再使用的时候必须将其归 ...

  8. 几个PostgreSQL数据库操作总结

    创建表 语法:如下 create table     table_name     (column_name         column_type(parametes)options,…); 注意: ...

  9. C++之路起航——标准模板库(queue)

    queue: FIFO队列:先进先出队列. 优先队列:对队列中的元素按优先级的大小输出. 定义: FIFO队列: queue<数据类性>变量名. 优先队列:priority_queue&l ...

  10. [Ubuntu] Autostart nginx, php-fpm and mysql in Ubuntu14.04

    [nginx] Step 1 Download the shell script wget https://raw.github.com/JasonGiedymin/nginx-init-ubuntu ...