Search feature doesn't work when entering in parts of the name using Angular.js

Question

I have a search functionality from my table as per the Restaurant Name using angular.js. Suppose there are many 'Restaurant Names' and if user is typing the first letter of any name its not filtering as per required after typing 2/3 letter its filtering properly.

Here is my code:

<div class="input-group" style="margin-bottom:10px; width:300px;">
<input class="form-control" placeholder="Type Restaurant Name" name="q" type="text" ng-model="searchProduct.rest_name">
</div>
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<thead>
<tr>
<th>Sl. No</th>
<th>Restaurant Name</th>
</tr>
</thead>
<tbody id="detailsstockid">
   <tr dir-paginate="cus in ($parent.labelResults=(listOfCustomerData  | filter:searchProduct.rest_name:startsWith | orderBy:'rest_name')) | itemsPerPage:5 track by $index" current-page="currentPage">
  <td>{{itemsPerPage *(currentPage-1)+$index+1}}</td>
   <td>{{cus.rest_name}}</td>
</tr>
</tbody>
</table>

Controller side code is here:

$scope.startsWith = function (actual, expected) {
    //console.log('hello',actual);
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }

I have many restaurant name such as Anjum,A&P Chinese Food Express,Bookers BBQ & Crab Shack,Butcher And The Baker, Cactus Club Stephen Avenue,Cactus Club - Macleod Trail.

When user is typing only a inside the search box the names started with a should filter but its not happening like that. All data is showing after type 2/3 letter the filtration process is working. Here I need when user will type the first letter, the names related to that search letter will filter.

I think that what you are looking for is typeahead. There are a number of solutions around (the one I tested some time ago was from the Bootstrap library: github.com/bassjobsen/Bootstrap-3-Typeahead. — FDavidov
– FDavidov, Commented Jul 7, 2016 at 5:56
@FDavidov : i need to filter some data from table after type letter in search box.Here i am using Angular.js.I am not sure whether it will work or not.Do you have any demo code.? — satya
– satya, Commented Jul 7, 2016 at 6:01
Sorry but no demo code. It was quite some time ago. I recommend you google for Bootstrap typeahead. You will see plenty of demos and sample codes. — FDavidov
– FDavidov, Commented Jul 7, 2016 at 6:03
@TahTatsumoto : Can you share your code by typing here for this particular problem. — satya
– satya, Commented Jul 7, 2016 at 6:28

Syam Pillai · Accepted Answer · 2016-07-07 05:59:35Z

0

give a minimum length to the input

i.e, ng-minlength = 1

<input class="form-control" placeholder="Type Restaurant Name" name="q" 
type="text" ng-model="searchProduct.rest_name" ng-minlength="1">

answered Jul 7, 2016 at 5:59

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tah · Accepted Answer · 2016-07-07 06:44:41Z

0

Angular's filter expression doesn't do a starts with. It does a contains. With the examples Restaurant names you provided, Typing an 'a' in the filter will not filter out any names. The easiest solution is to add a function in your controller:

var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
  $scope.listOfCustomerData = [{
    rest_name: "Anjum"
  }, {
    rest_name: "A&P Chinese Food Express"
  }, {
    rest_name: "Bookers BBQ & Crab Shack"
  }, {
    rest_name: "Butcher And The Baker"
  }, {
    rest_name: "Cactus Club Stephen Avenue"
  }, {
    rest_name: "Cactus Club - Macleod Trail"
  }];
  
  $scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div class="input-group" style="margin-bottom:10px; width:300px;">
    <input class="form-control" placeholder="Type Restaurant Name" name="q" type="text" ng-model="searchProduct.rest_name">
  </div>

  <table class="table table-bordered table-striped table-hover" id="dataTable">
    <thead>
      <tr>
        <th>Sl. No</th>
        <th>Restaurant Name</th>
      </tr>
    </thead>
    <tbody id="detailsstockid">
      <tr ng-repeat="cus in ($parent.labelResults=(listOfCustomerData  | filter:searchProduct.rest_name:startsWith | orderBy:'rest_name')) track by $index">
        <td>{{$index+1}}</td>
        <td>{{cus.rest_name}}</td>
      </tr>
    </tbody>
  </table>
</div>

For functionality, I removed the directive in my code. You should be able to just add the startsWith function and add the filter.

answered Jul 7, 2016 at 6:44

Tah

1,53614 silver badges22 bronze badges

6 Comments

satya Over a year ago

Let me to implement this.

satya Over a year ago

Your code is working properly.But i implemented the same code inside my file its not working as per expected.

satya Over a year ago

When i checked console message lowerStr.indexOf(expected.toLowerCase()) === 0 ,in your code its always returning false when user is typing something but in my code its first printing false then true and its repeating at the time of user entering any letter.

Tah Over a year ago

Try it without the directive in your code. If it's running twice, something else is triggering it.

satya Over a year ago

you mean i will run without startsWith or what ?

|

Community · Accepted Answer · 2017-05-23 12:14:46Z

-1

The below link can help you out. It seems same as the one you are trying to achieve. Angular filter match by character?

In the above link, they say about applying custom filters to have single character ( first letter) flirtingin angularjs.

Since single letter flitering happens in angularjs but it filters like for character "S" it takes up "Sandwich" and "Breads" too, though "Breads" is not valid item.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 7, 2016 at 6:09

Premalatha

1666 bronze badges

Collectives™ on Stack Overflow

Search feature doesn't work when entering in parts of the name using Angular.js

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related