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>

MY 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 = "";
    }
}

我仍然遇到同样的问题..当我在字段中输入一个名字时，数据列表中会出现两个名字，但是当我点击texbox顶部的三角形时，所有数据都会出现......我能做什么？要解决这个问题吗？

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);
                }
            });

        }
     }

});

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

Answer 2

正如@Rich评论的那样，不确定问题似乎是什么。但是，请检查此fiddle。它使用$scope.$watch来监视UserSearch中的更改，如果文本超过3个字符，则通过$http触发请求。

$scope.$watch('UserSearch', function(UserSearch) {
    if (UserSearch && UserSearch.length > 3) {
        $http.get('/api/getAllUser?SearchUser=' + UserSearch).success(function(users) {
            $scope.AllUser = users;
        }).error(function() {
            $scope.AllUser = [{name: 'test'}, {name: 'example'}];  
        });
    }
});

使用最小长度angularjs自动完成

2 个答案: