0

I am using Angular JS with Bootstrap UI typeahead, and pulling data from a REST service. The items in the array include town lists (towns served) that Ive combined, filtered out duplicates and created a 'townlist' array that the typeahead field uses. Everything works great.

The issue I need help with is when searching the town/city names, some use same words as each other (ie. Bedford, New Bedford, Brookfield, West Brookfield, East Brookfield) When a user types 'Bedford' the results for 'New Bedford' also appear.

I would like to match the EXACT array value, and only display results if it matches. So if a user searches Bedford, it will not include "New Bedford" in the results (unless an item contains both strings)

Im wondering if there is a simple way to solve this, or if I will need to include a custom filter.

In troubleshooting this, I generated a second array of all the two name towns that cause issues... I don't mind a solution where I simply run a custom filter with conditions to check if the query string matches any. 

<input id="townsrch" type="text" class="form-control input-sm" ng-model="selected" uib-typeahead="town for town in towns | filter:$viewValue | limitTo:8" placeholder="search by town" typeahead-editable="false" ng-change="updateView()" typeahead-on-select="onSelect($item, $model, $label)">

<div ng-show="textsearch || selected" class="item team-item asp_an_fadeInDown ng-cloak" ng-repeat="x in names | filter:textsearch | filter:selected | orderBy:'title.rendered'">

<slick id="theresultingslides" slides-to-show="4" slides-to-scroll="1" data="names" ng-if="viewLoaded" settings="slickConfig">

<a class="asp_res_image_url" href="{{ x.link }}">
  <div class="asp_image" style="background-image: url('{{x._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url}}');">
  <div class="void"></div>
  </div>
</a>

<div class="asp_content">
   <h3><a class="asp_res_url" href="{{ x.link }}">{{x.title.rendered}}<span class="overlap"></span></a></h3>
   <div class="etc"></div>
   <p class="desc"></p><p class="emp-info"><strong>{{stripBr(x.acf.team_member_title)}}</strong><br/>
   {{x.acf.team_member_branch_location}}<br />
   <small>{{stripWww(x.acf.team_member_email)}}</small></p>
   <div class="town-list-info"><p><small>{{x.acf.team_member_town}}</small></p></div>
</div>
<div class="clear"></div>
</div>
</slick>

<script>

angular.module('teamApp', ['slickCarousel','ui.bootstrap'])
  .controller('namesCtrl', function($http, $scope, $timeout) {
      $http.get("/wp-json/wp/v2/team-member?_embed&per_page=100")
        .then(function (response) {
         ..... unrelated stuff here ......
k.s.
  • 2,964
  • 1
  • 25
  • 27
Alan
  • 215
  • 2
  • 8
  • Should be tagged with [tag:angularjs] –  Feb 23 '18 at 17:18
  • I wish I could re-ask... I am all set now with the angular part now. I made a custom filter, that searches only the townlist field from the array. So I really only need to know how to compare the exact string from a 'comma separated list' as a single value in an array, with the selected value. if(data[i].acf.team_member_town.indexOf(skill) !== -1){ // nested conditions here.... // if 'data[i].acf.team_member_town' contains string between commas that is exact to the 'selected' value output.push(data[i]); } – Alan Feb 23 '18 at 18:55

1 Answers1

0

I found a fix for this. I created a custom filter. Within the loop, I set a variable for the individual items 'town list' and then another to convert to an array. I then used indexOf to match exact values within the array:

angular.module('TownFilter', [])
  .filter('compareTowns', function(){
    return function(data,selected){
        var output = []; 
        if(!!selected){
            skill = selected;
            for(var i = 0;i<data.length; i++){
              var townsection = data[i].acf.team_member_town;
              var finaltown = townsection.split(',');
                if(finaltown.indexOf(skill) !== -1){
                output.push(data[i]);
                }
            }
        }  else {
            output = data;
        }
        return output; 
    }
})
Alan
  • 215
  • 2
  • 8