AngularJs实现autoComplate

最近在搞AngularJs,需要实现一个自动检索的效果。

因初次接触AngularJs大费周折，百度了N多种方法.代码从几十行到几百行的都有，杂乱不堪。

最后发现其实简简单单的一句代码就可以很棒的实现这个效果，为了避免有太多的人跟我入一样的坑。分享在这里，哪里有什么不好的，欢迎大家留言。

代码如下

<script src="js/angular.js"></script>  <div ng-app="test">      <div ng-controller="testController">          <div class="user_inleft">              <input type="text" ng-model="searchOption" />              <ul>                  <li ng-repeat="u in searchuserData|filter:searchOption |orderBy :'userName'">                      <span id="{{u.id}}">{{u.userName}}</span>                  </li>              </ul>          </div>          <div style="clear:both"></div>      </div>  </div>

Js代码

<script>      var test = angular.module("test", []);      test.controller("testController", function ($scope, $http) {          $scope.searchuserData = [{ "id": "2", "userName": "赵云", "accountName": "yun.zhao", "guid": "", "description": "常山赵子龙", "createTime": "20151230152059000", "phone": "186********", "deleteFlag": 0, "email": "yun.zhao@***.com", "address": "蜀国" }, { "id": "3", "userName": "刘备", "accountName": "admin", "guid": "e10adc3949ba59abbe56e057f20f883e", "description": "蜀国的boss，耳垂到肩，手臂到膝", "createTime": "20151230152101000", "phone": "1554*****3543", "deleteFlag": 0, "email": "bei.liu@***.com", "address": "蜀国" }, { "id": "4028c78151f5f4900151f5ff08d10000", "userName": "曹操", "accountName": "cao.cao", "guid": "e10adc3949ba59abbe56e057f20f883e", "description": "枭雄", "createTime": "20151231112207000", "phone": "1554*****3543", "deleteFlag": 0, "email": "cao.cao@***.com", "address": "魏国" }, { "id": "fbb956295211161101521fc2f1f70000", "userName": "马超", "accountName": "chao.ma", "guid": "", "description": "蜀国大将", "createTime": "20160108134335000", "phone": "********9867", "deleteFlag": 0, "email": "chao.ma@***..com", "address": "蜀国" }, { "id": "fbb956295211161101521fc32c760001", "userName": "--------", "accountName": "--------", "guid": "eccbc87e4b5ce2fe28308fd9f2a7baf3", "description": "--------", "createTime": "20160108134350000", "phone": "--------", "deleteFlag": 1, "email": "--------", "address": "--------" }, { "id": "fbb95629521ff65e01522eb8696f0000", "userName": "汉汉", "accountName": "xinhan.sun", "guid": "698d51a19d8a121ce581499d7b701668", "description": "我只是来凑个数", "createTime": "20160111112623000", "phone": "********9634", "deleteFlag": 0, "email": "hanhan@***.com", "address": "***" }, { "id": "fbb95629522ecaa301522f037e5d0000", "userName": "ss", "accountName": "ss", "guid": "3691308f2a4c2f6983f2880d32e29c84", "description": "test data", "createTime": "20160111124824000", "phone": "ss23", "deleteFlag": 1, "email": "ss", "address": "ss23" }, { "id": "fbb95629522ecaa301522f1820dd0007", "userName": "qq", "accountName": "qq", "guid": "5d87197c7c26857efb2a726f19db772c", "description": "i want to delete this item,but it not work!~", "createTime": "20160111131056000", "phone": "aa", "deleteFlag": 1, "email": "aa", "address": "aa123" }, { "id": "fbb95629522ecaa3015234d67c88002a", "userName": "黄忠", "accountName": "zhong.huang", "guid": "8262e943d68cbab9f4d45795d283e03b", "description": "蜀国大将", "createTime": "20160112155657000", "phone": "186********", "deleteFlag": 0, "email": "zhong.huang@***.com", "address": "蜀国" }, { "id": "fbb95629522ecaa3015234d8fe4f002b", "userName": "吕布", "accountName": "bu.lv", "guid": "0bb8d5de5a09ddce764a15aee2b087e3", "description": "人中吕布，马中赤兔，最后被曹总给斩了", "createTime": "20160112155942000", "phone": "186********", "deleteFlag": 0, "email": "bu.lv@***.com", "address": "群雄" }, { "id": "fbb95629522ecaa301523f121823002c", "userName": "孙悟空", "accountName": "sunwukong", "guid": "ae38313c86ead9acc6471f85578483a6", "description": "齐天大圣", "createTime": "20160114153816000", "phone": "********9634", "deleteFlag": 0, "email": "suwukong@***.com", "address": "天庭5号花果山水帘洞" }];      })  </script>

版本：AngularJS v1.4.2

时间紧迫没详细写，但是复制粘贴，自己在搞个js文件，直接就能work了。老婆还等回家吃饭呢。就酱.