使用 AngularJS 并选择标签 Data-live-search 不起作用答案

【问题标题】：using AngularJS and select tag Data-live-search not working使用 AngularJS 并选择标签 Data-live-search 不起作用
【发布时间】：2019-03-05 18:09:17
【问题描述】：

我是 AngularJS 的新手。我关注了这个帖子angularjs-ng-options-with-group 并添加了数据实时搜索。

这是我的json

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

我的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>

图片我的选择菜单：

问题是当我选择橙色时，输出是 Apple。我选择苹果，输出是葡萄。我选择葡萄，输出是花。

我删除了class="selectpicker"，它工作正常，但在选择菜单中没有搜索。

是否有任何解决方案或替代方案？

【问题讨论】：

你能展示你所有的代码吗？最好在JSFiddle
这里MyJSFiddle你应该把标签脚本放到html中
哦，data-live-search 是引导库吗？是的，这可能与 Angular 的分组不兼容。您应该使用 filter 创建不带引导程序的 data-live-search 功能。
你能帮我写一个例子吗？我是 Angularjs 的新手
看看这个教程：toddmotto.com/everything-about-custom-filters-in-angular-js

标签： javascript html angularjs twitter-bootstrap-3 angularjs-filter

【解决方案1】：

很可能来自 Bootstrap 的 data-live-search 与许多 Angular 功能不兼容。相反，您应该使用 Angular filter 重新创建过滤。下面是一个用 Angular 编写的 startsWith 过滤器示例，专为您的数据而设计：

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 与您的数据

【讨论】：