using AngularJS and select tag Data-live-search not working

Question

I'm new to AngularJS. I followed this post angularjs-ng-options-with-group and added data-live-search.

This is my json

{"Type":"Orange","NSX":"Group1"},
{"Type":"Apple","NSX":"Group1"},
{"Type":"Grape","NSX":"Group1"},
{"Type":"Flower","NSX":"Group2"}

My html:

<select data-live-search="true" data-live-search-style="startsWith" 
 ng-model="val"  class="selectpicker"
 ng-options="x.Type group by x.NSX for x in Farm">              
</select>

Image My select menu:

The problem is when I choose Orange then the output is Apple. I choose Apple the output is Grape. I choose Grape, the output is Flower.

I remove class="selectpicker", it works fine, but there is no searching in select menu.

Is there any solution for this or alternative?

Can you show all your code? Preferably on [JSFiddle](http://www.jsfiddle.net) — Dan, Oct 01 '18 at 05:09
here [MyJSFiddle](https://jsfiddle.net/jhmc06tw/) you should put tag script into html — Seha, Oct 01 '18 at 07:13
Oh, `data-live-search` is a bootstrap library? Yeah, that's probably incompatible with angular's grouping. You should instead create the `data-live-search` functionality without bootstrap using `filter`. — Dan, Oct 01 '18 at 07:29
Have a look at this tutorial: https://toddmotto.com/everything-about-custom-filters-in-angular-js/ — Dan, Oct 01 '18 at 07:52

Dan · Accepted Answer · 2018-10-01T18:57:31.663

Chances are that data-live-search from Bootstrap is incompatible with many Angular features. Instead, you should recreate the filtering it does with an Angular filter. Here is an example of a startsWith filter written in Angular, made for your data:

app.filter('startsWith', function () {
    return function (items, input) {
        if(input === undefined || input.length === 0){
          return items;
        }

        var filtered = [];
        var inputMatch = new RegExp(input, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (inputMatch.test(item.Type.substring(0, input.length))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

Working JSFiddle with your data

using AngularJS and select tag Data-live-search not working

1 Answers1