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

posted @ 2016-06-07 15:23  jason.bai  阅读(2701)  评论(0)  编辑  收藏  举报