javascript - 自动完成最小长度 angularjs

Question

我在我的应用程序中使用 angular.js 和 html。所以，我想自动完成一个文本框，但只有当“UserSearch”字段的长度大于 3 时。

我的 HTML

<div class="col-sm-8">
    <div class="input-group">
        <input data-ng-model="UserSearch"  ng-change="selectSearchType(UserSearch)" list="title" type="text" class="form-control" placeholder="Name to search">
        <span class="input-group-btn">
            <button  class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i></button>
        </span>
        <datalist id="{{test}}">
            <option data-ng-repeat=" user in AllUser" value="{{user.name}}">
        </datalist>
    </div>
</div>

我的JS

$scope.test = "";

$scope.selectSearchType = function (UserSearch) {

    if (UserSearch.length > 3) {
        $scope.test = "title";

        $http.get("/api/getAllUser?SearchUser=" + UserSearch).success(function (data) {
            $scope.AllUser = data;                    
        })
    }
    else {
        $scope.test = "";
    }
}

我仍然有同样的问题..当我在字段中输入名称时，数据列表中出现两个名称，但是当我单击文本框顶部的三 Angular 形时，所有数据都会出现...我能做什么如何解决这个问题？

Answer 1

如果您使用的是 HTML5 数据列表，那么本质上您就是在滚动自己的自动完成功能。

我建议创建一个封装上述代码的指令。

所以这个:

    <div class="input-group">
        <input data-ng-model="UserSearch"  ng-change="selectSearchType(UserSearch)" list="title" type="text" class="form-control" placeholder="Name to search">
        <span class="input-group-btn">
            <button  class="btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i></button>
        </span>
        <datalist id="{{test}}">
            <option data-ng-repeat=" user in AllUser" value="{{user.name}}">
        </datalist>
    </div>

变成这样:

<autocomplete 
       search="UserSearch" 
       on-select="selectSearchType"
       min-search="3"
       list="user in AllUser">
</autocomplete>

基本指令如下所示:

var app = // get your angular module
app.directive('autocomplete', function () {

     return {
        replace: true,
        restrict: 'E',
        scope: {
            search: "=",
            minSearch: "=",
            list: "=",
            onSelect: "="
        },
        templateUrl: 'template/autocomplete-template.html', // use the above template
        link: function (scope, el, attrs) {

            scope.$watch('UserSearch', function() {
                if(scope.search.length > scope.minSearch) {
                    // this onSelect function will callback
                    // into your controller
                    scope.onSelect(search);
                }
            });

        }
     }

});

您现在可以调用 Controller 来进行 AJAX 调用。此回调将允许您在项目中的不同位置使用该组件。