Question

我刚开始使用Ionic框架。有没有办法在ionic中实现自动完成文本框？

我搜索了离子论坛，也搜索了谷歌但找不到任何东西。

Answer 1

在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>

Answer 2

只需要添加ng-click选项

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

Answer 3

您可以在指令的帮助下在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

使用angularJS自动完成文本框

3 个答案: