Angularjs instant search doesn't work as supposed

Question

I am trying to code a simple Angularjs instant search form. Here is a bit of code with which i work:

<script language="javascript">

 // The controller for instant search with Angular
 function InstantSearchController($scope)
  {
  $scope.items = [{ip:'144.76.24.100'},{ip:'176.9.56.120'},{ip:'178.63.240.111'};
  $scope.qq = '';
  $scope.show_results = false;

  // Paste the clicked value into the search box
  $scope.pasteValue = function(val)
   {
   $scope.qq = val;
   document.getElementById('q').value = val;
   $scope.show_results = false; 
   }

  // Paste the clicked value into the search box
  $scope.showResults = function(e)
   {
   e.stopPropagation();
   $scope.show_results = true;
   }
  }
 </script>


<label>Search for <input type="text" name="q" id="q" ng-value="{{qq}}" value="{{qq}}" size="23" ng-model="searchString" ng-click="showResults($event)">
 <div ng-show="show_results">
 <ul>
  <li ng-repeat="i in items | searchFor:searchString">
   <div ng-click="pasteValue(i.ip)">{{i.ip}}</div>
  </li>
 </ul>
 </div>
</label>

My problems are:

When a search result from the "LI" tag is clicked, it has to be pasted into the search box (that is working) and all search results (the entire "DIV" with "UL") must hide (that doesn't work).
Currently the value of the search box is set with the "document.getElementById('q').value = val;" line. I added that line because the previous one "$scope.qq = val;" does not work with this bit of code. I believe that Angularjs has some way to set the value.

Thank you.

I have defined a filter app.filter('searchFor', function(){...} which works. I took this example from somewhere. I have no problems with showing the instant search results in the DIV-UL block. What I need is to hide those search results when any of them is clicked and get the result filled into the text box by some Angularjs standard code rather than with the JS's getElementById() function. — Siarhei, Jun 18 '15 at 17:00

Pankaj Parkar · Answer 1 · 2015-06-18T17:22:55.230

0

Your pasteValue function should not set value of input using JavaScript that would messed up digest cycle and binding will not update, you should point to $scope.

// Paste the clicked value into the search box
$scope.pasteValue = function(val)
{
    $scope.searchString = val; //will update filter
    $scope.show_results = false; 
}

edited Jun 18 '15 at 17:22

answered Jun 18 '15 at 17:10

Pankaj Parkar

134,766
23
234
299

Thank you, it solved the most part of the problem. However, the "$scope.show_results = false;" line doesn't hide the search results. It has to be solved somehow. – Siarhei Jun 18 '15 at 17:31
could you add filter code in your `searchFor` filter? – Pankaj Parkar Jun 18 '15 at 17:34
I don't think that will solve the problem. Here is the filter function: app.filter('searchFor', function(){ return function(arr, searchString){ if(!searchString){ return arr; } var result = []; searchString = searchString.toLowerCase(); angular.forEach(arr, function(item){ if(item.ip.toLowerCase().indexOf(searchString) !== -1){ result.push(item); } }); return result; }; – Siarhei Jun 18 '15 at 17:44
@Siarhei it should work..are you getting any console errors? – Pankaj Parkar Jun 18 '15 at 19:06

Angularjs instant search doesn't work as supposed

1 Answers1