angularJS 模糊搜索

HTML

<input id="search1" type="text" ng-model="searchName" 
		placeholder="搜索机构名称" autocomplete="off" 
		ng-change="search(searchName)">

<div class="selectBox-searchList"
     ng-class="{true:'selectBox-select ',false:'selectBox-noSelect'}[Flag{{data.id}}]"
     ng-repeat="data in searchList1">
    <div ng-click="changeSearch(data)" ng-bind-html="changeHighLightred(data.name)"></div>
</div>

JS

//搜索 && 选择
$scope.searchName = "";
$scope.searchList = [
    {"name": "猪", "id": "1"},
    {"name": "小猪", "id": "2"},
    {"name": "大猫", "id": "3"},
    {"name": "小虎", "id": "4"},
    {"name": "中虎", "id": "5"},
    {"name": "老虎", "id": "6"},
    {"name": "老猫", "id": "7"},
    {"name": "熊猫", "id": "8"},
    {"name": "树懒", "id": "9"},
    {"name": "狮子", "id": "0"}
];

//初始化搜索列表
$scope.cleanListFlag = function () {
    $scope.searchList1 = $scope.searchList;
    $scope.searchList1.forEach(function (node) {
        $scope["Flag" + node.id] = false;
    });
};

$scope.changeSearch = function (data) {
   $scope.searchList1.forEach(function (node) {
        if (data.id == node.id) {
            $scope["Flag" + data.id] = true;
            $scope.selectSearchId = data.id;
            $scope.selectSearchName = data.name;
        } else {
            $scope["Flag" + node.id] = false;
        }
    })
}

//方法:搜索
$scope.search = function (searchName) {
    if(searchName == ""){
        var flag = $scope.selectSearchId;
        $scope.cleanListFlag();
        $scope["Flag" + flag] = true;
    }
    $scope.searchName = searchName;
    $scope.searchList1 = $filter("filter")($scope.searchList, document.getElementById("search1").value);
};

//方法:高亮
$scope.changeHighLightred = function (value) {
    return $filter('highlightred')(value, $scope.searchName)
};

//高亮方法
.filter("highlightred", function ($sce) {
    return function (org, type) {
        var reg = new RegExp(type, 'g');
        var result = '';
        if (type.length != 0 && org.indexOf(type) > -1) {
            result = org.replace(reg, "<span style='color: red;'>" + type + "</span>");
        }
        else {
            result = org;
        }
        return $sce.trustAsHtml(result);
    };
});

样式

.selectBox-search {
    position: fixed;
    font-size: 24px;
    margin: 1.5%;
    color: #b2b2b2;
}

#search1 {
    width: 100%;
    padding-left: 3%;
    border: 1px solid #b2b2b2;
}

.selectBox-searchList {
    height: 3rem;
    line-height: 3rem;
    font-size: 16px;
    padding-left: 3%;
}

.selectBox-noSelect{
    background: white;
    color: black;
}

.selectBox-select{
    background: #4FC3F7;
    color: white;
}

页面效果