搜素时自动补全功能的实现

前端:angularjs前端

<input type="text" class="#" ng-blur="#" ng-model="params.r"angularjs

                        typeahead="r as r.name for r in  filter($viewValue)"/>框架


 filter($viewValue)是数据源,这个能够异步获取异步

$scope.filter  =  function(val){url

        return service.get('url', {spa

                params : params事件

            }).then(function (res) {get

               return res.list;input

            }, function (rej) {it

                growl.addErrorMessage("操做失败");

            });

}

注:res表示请求成功,rej表示请求失败


这样的话即可以实现一个简单的自动补全,存在的问题

1:多音字

2:输入不存在的搜索信息


对于多音字咱们能够使用 Pinyin4j在后台匹配的时候处理(强调:为了实现模糊搜索请记住String的contain方法)


对于输入不存在的搜索信息前台作处理,添加一个 ng-blur事件来控制你须要的输入


下面这个例子是对你的输入信息进行匹配,若是不是预期,当光标点击别处输入框清空

$scope.projectBlur = function(val) {

            var tmpR = '';

            if (val === undefined || val.name === undefined || $scope.params.r.name === undefined) {

              $scope.params.r = tmpR;

            } else {

              if (val.name === $scope.params.r.name) {

                tmpR = $scope.params.r;

                return true;

              } else {

                $scope.params.r = tmpRt;

              }

            }

        };


附录:Pinyin4j的代码

连接:Pinyin4j

搜素能够使用lucence框架

相关文章
相关标签/搜索