使用angularJS自动完成文本框

我刚开始使用Ionic框架。有什么办法来实现离子自动完成文本框？使用angularJS自动完成文本框

我已经搜索离子论坛，也google搜索，但找不到任何东西。

2015-07-03 Mathavan Ramakrishnan

这里举例：http://codepen.io/calendee/pen/pCwyx/ –

看看角过滤器一个非常简单的方法来做到这一点，如果所有数据在客户端。如果你不得不在每个按键上做一个请求，看一看ng-change指令（搜索关于angularjs，而不是离子，针对你的JS问题） – grogro

在codepen中，您有一个完整的example。

<html ng-app="ionicApp"> 


<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic Template</title> 

    <link href="http://code.ionicframework.com/1.0.0-beta.2/css/ionic.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0-beta.2/js/ionic.bundle.js"> 
    </script> 
    </head> 
    <body ng-controller="MyCtrl"> 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">{{myTitle}}</h1> 
    </ion-header-bar> 
    <ion-header-bar class="bar-subheader item-input-inset"> 
    <label class="item-input-wrapper"> 
    <i class="icon ion-ios7-search placeholder-icon"></i> 
    <input type="search" placeholder="Search" ng-change="search()" ng-model="data.search"> 
    </label> 
    <button class="button button-clear"> 
    Cancel 
    </button>  
    </ion-header-bar> 
    <ion-content> 
     <div class="list"> 
     <li class="item" ng-repeat="airline in data.airlines">{{airline.name}}</li> 
     </div> 
    </ion-content> 

    </body> 
</html>

来源

2015-07-03 13:54:51

codepen代码不允许你选择搜索结果 – singh

codepen doesn不工作，不能选择结果 – Yatin

@JotiBasi Basi只需简单地添加ng-click，就可以使其工作。你不能根据你实际上没有想到的东西来冷落某人。付出很少的努力！ –

只需要加入NG-点击选项

<li class="item" 
     ng-repeat="airline in data.airlines" 
     **ng-click="doSomethingWithSelectedItem(airline)"**> 
    {{airline.name}} 
</li>

来源

2017-03-18 14:14:02

您可以用指令的帮助下，如下AngularJS实现自动完成功能。

首先创建控制器来处理输入文本框操作，如下面

app.controller('autoCompleteController', function($scope, $window, autoSearchFactory) { 

$scope.inputWidth = '200'; 
$scope.toggleAutoSearch = 'none'; 
$scope.searchText = ''; 

$scope.searchData = null; 

$scope.initiateAutoSearch = function() { 
    $scope.toggleAutoSearch = 'visible'; 
    autoSearchFactory.getCountries($scope.searchText).then(function(data) { 
    $scope.searchData = data; 
    }); 
} 

$scope.selectedSearchResult = function(input) { 
    $scope.searchText = input; 

    $scope.toggleAutoSearch = 'none'; 
} 
});

然后创建服务来从Web服务的结果。该服务使用HTTP get方法从JSON格式的API中获取结果。

app.service('autoSearchFactory', function($http, $q, $window) { 
return { 
    getCountries : function(countryName) { 
    return $http.get('https://restcountries.eu/rest/v2/name/' + countryName).then(function(response) { 
     return response.data; 
    }, function(errResponse) { 
     console.error('Error while fetching users'); 
     return $q.reject(errResponse); 
    }); 
    } 
}});

然后最后创建指令

<div class="input-box" style="width: {{inputWidth}}px"> 

<input type="text" ng-model="searchText" ng-keyup="initiateAutoSearch();" /> 

<div class="auto-result" style="width: {{inputWidth}}px; display: {{toggleAutoSearch}}"> 
    <ul ng-repeat="var in searchData"> 
    <li ng-click="selectedSearchResult(var.name)">{{var.name}}</li> 
    </ul> 
</div> 

</div>

就是这样。

你也可以在这里找到完整的示例Auto Complete Text Box using AngularJS

来源

2017-04-07 19:36:06

使用angularJS自动完成文本框

回答

相关问题