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>

 注意：主要实现功能的其实就是filter,filter:searchOption。功能很强大哦，首字母或者其中的某个字母也ok,例：孙悟空，可根据s,或者wukong检索出来。

Js代码

数据应该是读取来的，这里提供Json的数据。

<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": "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了。老婆还等回家吃饭呢。就酱.

 

早上来看信息说被移除首页，排版太乱...没想往首页发，既然说乱就整理下吧。干货呢！