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