過濾搜索結果

Question

我有一個代碼，可以從搜索欄中搜索項目，但是在搜索的選擇下拉列表中：

[ ]

但是我堅決決定不希望選擇查詢過濾器，而只選擇查詢過濾器，我該如何分隔代碼？ 從選擇到獨立搜索。 這是我使用的代碼：

Javascript：

// AngularJS

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

phonecatApp.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'
    }, {
        'name': 'Item 9'
    }, {
        'name': 'Item 10'
    }, {
        'name': 'Item 11'
    }, {
        'name': 'Item 12'
    }, {
        'name': 'Item 13'
    }, {
        'name': 'Item 14'
    }, {
        'name': 'User 15'
    }, {
        'name': 'User 16'
    }, {
        'name': 'Person 17'
    }, {
        'name': 'Person 18'
    }, {
        'name': 'Person 19'
    }, {
        'name': 'Item 20'
    }, ];
});

// jQuery
$('.dropdown-menu').find('input').click(function (e) {
    e.stopPropagation();
});

HTML：

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

CSS：

.dropdown.dropdown-scroll .dropdown-menu {
    max-height: 200px;
    width: 60px;
    overflow: auto;
}
.search-control {
    padding: 5px 10px;
}

JSFiddle

Answer 1

您可以僅在vie上輸入字段，然后在查詢編輯時向用戶顯示已過濾的選項，當用戶選擇該選項時，您可以隱藏所有選項。 因此，它會像Typehead一樣出現並起作用。 因此，您可以將模板更改如下：

<div class="body-container" ng-app="app">
  <div ng-controller="ListCtrl">
    <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" ng-change="queryUpdated()" />
    </div>
    <div class="items" ng-hide="isSelected">
      <p class="search-items" ng-click="selectItem(item.name)" 
       ng-repeat='item in items | filter:query track by $index'> {{item.name}}
      </p>
    </div>
  </div>
</div>

然后與您現有的控制器代碼一起添加以下兩個功能：

$scope.selectItem = function(selected) {
    $scope.query = selected;
    $timeout(function() {
      $scope.isSelected = true;
    });
}
$scope.queryUpdated = function() {
    $scope.isSelected = false;
}

因此，這種方式可以具有類似Typehead的功能，也可以根據要求更改其行為，例如在首次加載時顯示列表或當用戶根本不知道選項時。

工作jsfiddle

現在，您可以使用Angular UI Bootstrap插件庫實現相同的操作。 這樣，您的代碼將看起來

<input type="text" ng-model="selected" 
uib-typeahead="item.name for item in items | filter:$viewValue | limitTo:8" 
class="form-control">

在這里，來自庫的uib-typehead指令將處理下拉選項模板的添加，並使用ngAnimate處理其動畫。

工作插銷示例