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

前端：angularjs

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

 filter($viewValue)是数据源，这个可以异步获取

$scope.filter  =  function(val){

        return service.get('url', {

                params : params

            }).then(function (res) {

               return res.list;

            }, function (rej) {

                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框架

转载于:https://my.oschina.net/u/2361475/blog/483313