基于AngularJs的联想搜索框组件封装

组件组成：HTML模板 + JS文件

组件原理：HTML模板就是规定组件由哪些元素构成，这些元素是什么结构的，既组件是长啥样的；JS文件是用来声明和定义组件功能的，相当于JSP文件中<script>标签中JS代码的功能；

联想搜索：用户在输入框中输入关键字，并自动向后端发送异步请求，得到请求回来的数据后，以列表的形式展示在搜索框下方，用户通过鼠标悬停或者上下键选择选项，鼠标点击或者Enter键实现搜索并列表消失的功能，功能如下图：

代码部分：

• HTML模板：

<span class="relative">
    <input type="text" placeholder="请输入关键字..." ng-model="inputModel" ng-change="method.timeflash()" ng-blur="method.closeSearch()" ng-focus="method.searchData()" ng-keydown="method.keyDownEvent($event)">
    <i class="iconfont searchBtn"></i>
    <span class="search-list" ng-show="vm.dataList.length > 0" id="forhide">
        <a href="javascript:void(0)" ng-repeat="data in vm.dataList | limitTo:10"
           ng-mouseover="method.mouseOverEvent($index)" ng-click="method.enterKeyEvent(data)">{{data.value}}</a>
    </span>
</span>

注解：输入框对象$scope.inputModel用于保存输入的关键字，输入框提供change、blur、focus、keydown事件的监听。

　　change事件：当输入框内容变化时，触发计时器，400毫秒后开始搜索；

　　blur事件：搜索框失焦时，清空并隐藏数据列表；

　　focus事件：输入框获得焦点时，直接搜索；

　　keydown事件：按键监听事件，监听上下键及Enter事件，上下键选择列表中的数据项，Enter键做用户指定操作。

• CSS类：

.relative{position: relative!important;}
.absolute{position: absolute!important;}

.search-list {
    position: relative;
    width: 100%;
    background: #fff;
    border: solid 1px #5093e1;
    z-index: 10;
}

.search-list a {
    width: 100%;
    height: 30px;
    line-height: 30px;
    float: left;
    color: #666;
    display: block;
    font-size: 13px;
    padding: 0 10px;
    text-decoration: none;
}

.search-list a:hover {
    color: #666;
}

.search-list .selected {
    background: #5093e1;
    color: #fff!important;
}

注解：数据列表相对于搜索框相对布局。

• JS文件

APP.directive('search', ['Postman','$timeout', function (Postman,$timeout) {
    return {
        scope: {// 传入的参数
            inputModel: '=',// 输入框对象
            enterKeyEvent: '='// 用户指定操作
        },
        restrict: 'E',// 封装成Element（元素）类型
        templateUrl: 'directive/search/search.html',// 模板路径
        replace: false,
        link: function ($scope) {
            var timer;
            var selectListIndex;// 数据列表索引
            $scope.vm = {};// 模板视图对象
            $scope.method = {};// 模板方法对象

            function initParams(){// 初始化参数
                $scope.vm = {
                    selectedData: {},// 选中数据对线
                    dataList: []// 数据列表
                };
                $scope.method.enterKeyEvent = $scope.enterKeyEvent;//将传过来的用户指定的方法赋值给组件
            }

            function init() {// 程序初始化执行部分
                initParams();
            }

            $scope.method.searchData = function () { // 根据关键字搜索联想词
                if ($scope.inputModel === undefined) {// 为空时不做搜索
                    return;
                }
                if ($scope.inputModel.length > 0) {// 非空时异步请求联想词
                    var promise = Postman.httpGet('data/fuzzy', {// Postman为自己封装的Http请求服务，这里用Get方法请求数据
                        keyWord: $scope.inputModel});
                    promise.then(function (data) {
                        if (data && data.code === 0) {
                            $scope.vm.dataList = data.data;// 请求回来的数据赋值给视图对象中的dataList数组
                            selectListIndex = -1;// 索引置为-1，不选中任何项
                            $('#forhide').show();// 显示列表
                        }
                    });
                }
            };

            $scope.method.keyDownEvent = function ($event) {
                $event.stopPropagation();// 阻止其他按键事件冒泡
                var listArry = $('#forhide>a');
                switch ($event.keyCode) {
                    case 38:// 'UP'
                        selectListIndex--;
                        if (selectListIndex >= 0 && selectListIndex < listArry.length) {
                            for (var i = 0; i < listArry.length; i++) {
                                listArry.eq(i).removeClass('selected');// 清除选中样式
                                if (i === selectListIndex) {
                                    listArry.eq(i).addClass('selected');// 添加选中样式
                                    $scope.inputModel = listArry.eq(i).text();// 将选中项的文本赋值给输入框
                                }
                            }
                        } else if (selectListIndex < 0) {// 第0项跳转到最后一项
                            selectListIndex = listArry.length - 1;
                            listArry.eq(0).removeClass('selected');
                            listArry.eq(selectListIndex).addClass('selected');
                            $scope.inputModel = listArry.eq(selectListIndex).text();
                        }
                        break;
                    case 40:// 'Down'
                        selectListIndex++;
                        if (selectListIndex >= 0 && selectListIndex < listArry.length) {
                            for (var i = 0; i < listArry.length; i++) {
                                listArry.eq(i).removeClass('selected');
                                if (i === selectListIndex) {
                                    listArry.eq(i).addClass('selected');
                                    $scope.inputModel = listArry.eq(i).text();
                                }
                            }
                        } else if (selectListIndex >= listArry.length) {// 最后一项跳转到第0项
                            selectListIndex = 0;
                            listArry.eq(listArry.length - 1).removeClass('selected');
                            listArry.eq(selectListIndex).addClass('selected');
                            $scope.inputModel = listArry.eq(selectListIndex).text();
                        }
                        break;
                    case 13:// Enter键触发用户指定操作
                        $scope.method.enterKeyEvent($scope.vm.dataList[selectListIndex]);
                        $scope.method.closeSearch();// 关闭联想词列表
                        break;
                }
            };

            $scope.method.mouseOverEvent = function (index) {// 鼠标悬停事件：获取悬停数据项的索引，并添加选中样式
                selectListIndex = index;
                var listArry = $('#forhide>a');
                for (var i = 0; i < listArry.length; i++) {
                    listArry.eq(i).removeClass('selected');
                    if (i === selectListIndex) {
                        listArry.eq(i).addClass('selected');
                        $scope.inputModel = listArry.eq(i).text();
                    }
                }
            };

            $scope.method.timeflash = function () {// 定时器控制，400ms后才发送请求
                $timeout.cancel(timer);// 关闭400ms内的上一个计时器，400ms后认为用户停止输入，即输入完成，开始搜索，从而减少多余的请求次数
                timer = $timeout(function () {
                    $scope.method.searchData();// 发送搜索请求
                }, 400);
            };

            $scope.method.closeSearch = function () {// 关闭联想词列表
                $scope.vm.dataList = [];
                $('#forhide').hide();
            };

            init();// 程序入口
        }
    };
}]);

• 使用样例：

<search input-model="inputBox" enter-key-event="search"></search>

传递组件需要的两个参数：inputModel和enterKeyEvent。"search"为用户指定的操作、方法。