javascript - 自动完成最小长度 angularjs

标签 javascript html angularjs

我在我的应用程序中使用 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 形时,所有数据都会出现...我能做什么如何解决这个问题?

最佳答案

如果您使用的是 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 调用。此回调将允许您在项目中的不同位置使用该组件。

关于javascript - 自动完成最小长度 angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21994492/

相关文章:

javascript - AngularJs $routeProvider 不支持 MVC

javascript - 单击时获取 href 的顶级主机名

javascript - 如何根据屏幕尺寸删除元素

angularjs - Angular Gantt - 如何设置起始日期和截止日期范围以仅显示所需的分钟数?

javascript - 在 ng-repeat 中获取元素的比例在 Angularjs 中返回未定义

javascript - Way 不会将参数传递给匿名函数导致它返回一个函数

javascript - 将值从 QueryString 传递到 asp.net mvc 中 Controller 的 Index 操作

javascript - AngularJS 最佳实践 - 风格指南

html - 在 html 表格行中对齐单选选项的问题

javascript - 使侧导航高度匹配 Angular ui-view div 高度