how to hide input field whenever clicked anywhere else in angular js

Question

i am a rookie trying to learn something.....i have written a code which is kind of a live search..now i want to hide it whenever i click anywhere else on the page...the code is using Angularjs.the full code is a bit complex.live search is only a part of it.so it isnt working over here....can anybody give me an answ for the problem?

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

// Defines the search controller by bringing the data into the scope.
//
app.controller("instantSearchCtrl", function($scope) {
  $scope.data = data;

  $scope.setQuery = function(query) {
    $scope.query = query;
    $scope.focus = false;
  };
});

// Returns the search function that will perform the filter on the data.
//
app.filter('search', function() {
  return search;
});

// Returns an array of items where the item text matches the search query. In
// this example, both the query and item are converted to lower case for easier
// matching.
//
function search(arr, query) {
  if (!query) {
    return arr;
  }

  var results = [];
  query = query.toLowerCase();

  angular.forEach(arr, function(item) {
    if (item.toLowerCase()
      .indexOf(query) == 0) {
      results.push(item);
    }
  });

  return results;
};

 

ul.data-ctrl 
{
    
    list-style: outside none none;
    margin: 0 auto;
    max-width: 500px;
    padding-left: 0;
    text-align: center;
    text-decoration: none;
}
input.search {
    border: 2px solid #1fa67a;
    font-size: 16px;
    height: 35px;
    text-align: center;
    width: 280px;
}
.data-ctrl li {
    background-color: #000;
    border-radius: 3px;
    color: #ffffff;
    font-size: 17px;
    height: 25px;
    padding: 0;
}

<tr ng-app="instantsearch">
    <td colspan="3"  ng-controller="instantSearchCtrl">
        <input type="text" class="search" name="keyword" ng-model="query" id="keywords" placeholder="Keywords:" ng-focus="focus=true">
        <ul class="data-ctrl" ng-show="focus">
            <li ng-repeat="item in data | search:query" ng-bind="item" ng-click="setQuery(item)"></li>
        </ul>
    </td>
</tr>

It seems same problem answered in [this question](http://stackoverflow.com/a/38275584/2435473) — Pankaj Parkar, Jul 09 '16 at 08:42
[This question](http://stackoverflow.com/questions/20186438/angular-click-outside-of-an-element-event) maybe of help — MMhunter, Jul 09 '16 at 08:51

score 0 · Answer 1 · answered Jul 09 '16 at 09:29

0

You can try using ng-hide with ng-blur like :

<tr ng-app="instantsearch">
<td colspan="3"  ng-controller="instantSearchCtrl">
    <input type="text" class="search" name="keyword" ng-model="query" id="keywords" placeholder="Keywords:" ng-focus="focus=true" ng-hide="hideInput" ng-blur="hideInput = true;">
    <ul class="data-ctrl" ng-show="focus">
        <li ng-repeat="item in data | search:query" ng-bind="item" ng-click="setQuery(item)"></li>
    </ul>
  </td>
</tr>

answered Jul 09 '16 at 09:29

Peter Wilson

4,150
3
35
62

What happens if I click on an item. Blur of input will be triggered before click of li. So we may not get the "item" in "setQuery" function. – sanjeev shetty Jul 22 '17 at 19:58

how to hide input field whenever clicked anywhere else in angular js

1 Answers1