Filter search Results

Question

I have a code that searches items from a search bar, however it is on a select dropdown with the search:

[ ]

However I reciently decided i did not want the select and only the query filter, how would I seperate the code? From the select to independent search. Here is the code I used:

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

You can have just input field on the vie initially then on query edit you show the filtered options to user & when user selects the option you can hide all the options. So this way it'll appear & work just like Typehead. So you can change your template to as follows:

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

Then along with your existing controller code add these two functions:

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

So this way you can have Typehead like feature & also you can change its behavior according to requirement like showing list on first load or when user unaware of options at all.

Working jsfiddle

Now you can implement same thing using Angular UI Bootstrap plugin library. With that your code will look

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

Here uib-typehead directive from library will handle addition of template for dropdown options & handling its animation using ngAnimate.

Working plunker Example