web-dev-qa-db-ja.com

AngularJsの検索可能なドロップダウン

APIからデータをフェッチしていて、検索可能なdropdownが必要なので、入力を開始すると、APIからのデータが表示されます。現在、私はこのコードを持っています。

<select  class="formControl" name="repeatSelect" id="repeatSelect" ng-model="facilitiesData.business_id">
    <option ng-repeat="option in businesses" value="{{option.id}}">{{option.business_name}}</option>
</select>

ありがとう。

angularjssearchfilterdropdown
4
Usman I

たぶん、あなたは this を探しています。これは解決策の1つかもしれません。

これにはtypeaheadsのタイプがあります。必要に応じて1つを選択できます。

<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">

注-ライブラリui-bootstrap-tplsが必要ですAngularJSチームによって公式に作成されました。

6
MAC

これを試して。オプション内に直接テキストボックスを配置して、それに基づいて選択をフィルタリングすることはできません。しかし、これはあなたがそうすることができる一つの方法です。別の方法は、プラグインまたはangularマテリアルデザインを使用することです。

// Angular

var myApp = angular.module('app', []);

myApp.controller('ListCtrl', function($scope) {
  $scope.items = [{
    'name': 'Item 1'
  }, {
    'name': 'Item 2'
  }, {
    'name': 'Account 3'
  }, {
    'name': 'Account 4'
  }, {
    'name': 'Item 5'
  }, {
    'name': 'Item 6'
  }, {
    'name': 'User 7'
  }, {
    'name': 'User 8'
  }];
});

// jQuery
$('.dropdown-menu').find('input').click(function(e) {
  e.stopPropagation();
});
.dropdown.dropdown-scroll .dropdown-menu {
  max-height: 200px;
  width: 60px;
  overflow: auto;
}

.search-control {
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="dropdown dropdown-scroll" ng-app="app">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
    <li role="presentation">
      <div class="input-group input-group-sm search-control">
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
        </span>
        <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
      </div>
    </li>
    <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
    </li>
  </ul>
</div>
5
Krupesh Kotecha

datalistタグも使用できます。独自の検索可能なドロップダウンを作成する場合は、次のコードを使用します。

HTML部分：

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="myCtrl">
    <form ng-submit="click(search);">
      <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>
      <input type="text" ng-model="search" list="names">
      <datalist id="names" class="form-control" ng-model="name">
        <option value=''>-- select an option --</option>
        <option ng-repeat="option in contacts | filter:search | limitTo:3" value="{{option.name}}"></option>

      </datalist>
      <button type="submit">Submit</button>
    </form>
  </div>
</body>

</html>

JSパーツ：

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
  $scope.showContacts = function() {
    $scope.contacts = [{
      id: 1,
      name: "Ben",
      age: 28
    }, {
      id: 2,
      name: "Sally",
      age: 24
    }, {
      id: 3,
      name: "John",
      age: 32
    }, {
      id: 4,
      name: "Jane",
      age: 40
    }];

  };
  $scope.showContacts();
  $scope.click = function(MyData) {
    alert(JSON.stringify(MyData));
  };

});

動作デモはこちらから入手できます。 https://plnkr.co/edit/hamW3F05YUPrWwS3RmmG?p=preview

1
Tanu

あなたは正しい道にいます。ここで必要なのは、httpごとにAPI呼び出しをトリガーするkeypressサービスまたはファクトリを作成し、その結果を$scope.businesses配列に入力することだけです。

0
nikjohn

自分で検索可​​能なドロップダウンを作成したい場合は、フィルターを使用できます。 textboxを使用したフィルター付きの検索可能なドロップダウン

プラグインをチェックしたい場合は angular multi select

私は自分のプロジェクトの1つで再利用しています。柔軟なプラグインであり、複数選択も可能です。

0
Gangadhar JANNU