如何使用AngularJS实现自动完成TextBox？ [英] How to implement Autocomplete TextBox using AngularJS?

问题描述

我有一个文本字段，当我开始输入时，应该选择预定义的单词。

 <输入类型= 文本 >< /输入> 
  

我有一个项目列表。只有这应该显示。如何让它工作？
控制器如下。

  angular.module（'starter.controllers'，[]）
 .controller （'AppCtrl'，函数（$ scope，$ ionicModal，$ timeout，authService，$ state，$ http，$ ionicLoading）
 {
 $ scope.loginSubmitted = false; 
 $ scope。 myflag = false; 
 $ scope.User = {}; 
 $ scope.toast = function（）{
 $ ionicLoading.show（{
 template：'wrong credentials'
}）; 
 $超时（function（）{
 $ ionicLoading.hide（）; 
}，1000）; 
} 
 
 $ scope.doLogin = function（）{
 
 $ scope.loginSubmitted = true; 
 $ scope.loginstatus == 0; 
 authService.GetByUsername（）。success（function（function（数据）{
 $ scope.UserData = data; 
 console.log（$ scope.UserData）; 
 for（var i = 0; i< $ scope.UserData.length; i ++ ）{
 if（$ scope.UserData [i] .UserName == $ scope.User.UserName&& $ scope.UserData [i] .P assword == $ scope.User.Password）{
 
 $ scope.loginstatus = 1; 
休息; 
} 
} 
 if（$ scope.loginstatus == 1）{
 $ state.go（'app.single'）
} 
 else {
 console.log（'错误凭据'）; 
 $ scope.toast（）; 
} 
}）。error（function（err）{
 console.log（err）; 
}）; 
} 
}）。controller（'PlaylistsCtrl'，函数（$ scope）{
 
}）。controller（'EmployeeCntrl'，function（$ scope，$ stateParams）{ 
 
 $ scope.names = [john，bill，charlie，robert，alban，oscar，marie，celine，brad， 画了，rebecca，michel，francis，jean，paul，pierre，nicolas，alfred，gerard，louis，albert，edouard ，benoit，guillaume，nicolas，joseph]; 
 
 $ scope.data = {}; 
 
 // $ .sscope.data。 date = new Date（）。toDateString（）; 
 $ scope.data.FromDate = new Date（）; 
 $ scope.employees = [{name：vishnu}，{name：seenu }]; 
 
 $ scope.selectedEmployee = $ scope.employees [0] .name; 
 
 $ scope.projects = [{name：crwhy}，{ name：big in}]; 
 $ scope.selectedProject = $ scope.projects [0] .name; 
 $ scope.logdata = function（form）{
 console.log（ $ scope.data）; 
} 
}）; 
  

现在可以按照要求进行吗？

http： //ngmodules.org/modules/ngAutocomplete

我有一个简单的指令： -

控制器编码： -

  function DefaultCtrl（$ scope）{
 $ scope.names = [john ，法案，查理，罗伯特，阿尔班，奥斯卡，玛丽，赛尔，布拉德，画了，丽贝卡，米歇尔，弗朗西斯， jean，paul，pierre，nicolas，alfred，gerard，louis，albert，edouard，benoit，guillaume，nicolas，joseph ]。 
} 
 
 angular.module（'MyModule'，[]）。指令（'autoComplete'，函数（$ timeout）{
返回函数（范围，iElement，iAttrs） {
 iElement.autocomplete（{
 source：scope [iAttrs.uiItems]，
 select：function（）{
 $ timeout（function（）{
 iElement。触发器（'输入'）; 
}，0）; 
} 
}）; 
}; 
}）; 
  

html： -

 < div ng-app ='MyModule'> 
< div ng-controller ='DefaultCtrl'> 
< input auto-complete ui-items =namesng-model =selected>已选择
 = {{selected}} 
< / div> 
< / div> 
  

用作资源
http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui .css
https://code.angularjs .org / 1.0.0 / angular-1.0.0.js

小提琴： -

http://jsfiddle.net/sebmade/swfjT/

I have a text field, while i start typing, the predefined words should come for selecting.

 <input type="text"></input>

i have a list of items. only that should show. how to make it work? controller follows.

 angular.module('starter.controllers', [])
          .controller('AppCtrl', function($scope, $ionicModal, $timeout, authService, $state, $http,$ionicLoading)
        {
          $scope.loginSubmitted = false;
       $scope.myflag = false;
        $scope.User = {};
       $scope.toast = function(){
       $ionicLoading.show({
       template: 'wrong credentials'
   });
     $timeout(function() {
       $ionicLoading.hide();
   }, 1000);
     }

         $scope.doLogin = function() {

     $scope.loginSubmitted = true;
   $scope.loginstatus==0;
     authService.GetByUsername().success(function(data) {
     $scope.UserData = data;
    console.log($scope.UserData);
    for (var i = 0; i < $scope.UserData.length; i++) {
      if ($scope.UserData[i].UserName == $scope.User.UserName && $scope.UserData[i].Password == $scope.User.Password) {

        $scope.loginstatus=1;
        break;
      }
    }
    if($scope.loginstatus==1){
      $state.go('app.single')
    }
    else {
        console.log('wrong credentials');
        $scope.toast();
      }
  }).error(function(err) {
    console.log(err);
  });
}
}).controller('PlaylistsCtrl', function($scope) {

 }).controller('EmployeeCntrl', function($scope, $stateParams) {

    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];

     $scope.data = {};

     //$scope.data.date = new Date().toDateString();
   $scope.data.FromDate = new Date();
   $scope.employees = [{name: "vishnu"}, {name: "seenu"}];

  $scope.selectedEmployee = $scope.employees[0].name;

  $scope.projects = [{name: "crwhy"}, {name: "big in"}];
     $scope.selectedProject = $scope.projects[0].name;
     $scope.logdata = function(form) {
    console.log($scope.data);
  }
});

now can u do it as per requirement?

解决方案

You have several plugins for it :- http://ngmodules.org/modules/ngAutocomplete

i have something simple with a directive :-

Controller Coding :-

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

html :-

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

Use as resources http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css https://code.angularjs.org/1.0.0/angular-1.0.0.js

Fiddle :-

http://jsfiddle.net/sebmade/swfjT/

这篇关于如何使用AngularJS实现自动完成TextBox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！