angular-tags icon indicating copy to clipboard operation
angular-tags copied to clipboard

typeaheadOpts.filter implementation - custom filter

Open Darmikon opened this issue 9 years ago • 3 comments

baz = [
  {value: 'baz', name: 'derp', id:22, age:23, job:'js developer'},
  {value: 'baz', name: 'herp', id:23, age:24, job:'angular developer'},
] 

I have a lot of properties in each object of my source array. However, when I start typing I want angular's filter to check only fields with custom names. As to my example, I want to make search in 'value' and 'name', but I don't want to search in 'id', 'age' and 'job'. I haven't found any example of implementation such functionality in your docs. Please, give me some example, how to implement this functionality in your module. Thank you very much for your work!

Darmikon avatar Jul 29 '14 08:07 Darmikon

For now, I've found temporary solution for me.

In angular-tags-0.2.10-tpls.js I changed line number 25: " data-typeahead=\"stag as stag.name for stag in srcTags|{{typeaheadOptions.filter}}:$viewValue|orderBy:orderBy\"\n" +

I've changed filter:$viewValue to {{typaheadOptions.filter}}:$viewValue.

Filter itself looks like so:

angular.module('myApp.filters', []).
    filter('myFilter', function () {
        return function (items, search) {
            var result = [];
            angular.forEach(items, function (item) {
                var keyword = new RegExp(search, 'i');
                if (keyword.test(item.name)||keyword.test(item.grade)||keyword.test(item.job)) {
                    result.push(item);
                }
            });
            return result;
        }
    });

In this solution I've lost default filter and now I need always use typeaheadOpts with filter property:

    $scope.typeaheadOpts = {
        minLength: 2
        ,filter:'myFilter' //filter's name as a string
        //,filter:'filter' //to return default functionality
    };

It would be great if you create 'filter' option for your plugin. It's very important to set somehow the filter option to 'filter' by default and provide user with a chance to set own custom filter via typeaheadOpts.filter. Thank you again. And I hope you'll implement filter option in the nearest future.

Darmikon avatar Jul 29 '14 09:07 Darmikon

typeahead options should pass directly through... ?

boneskull avatar Aug 10 '14 06:08 boneskull

I guess yes. In angular bootstrap typeahead directive you may change filter directly in directive's attribute. stag as stag.name for stag in srcTags|customFilter But in your case there is a hardcoded value of filter in your directive's template. Angular bootstrap example of typeahead directive uses this value as an example. This filter looks through all the properties in each object of some resource array. As I've understood from your plugin's construction, the only place, where I can configure additional options, is typeahead options. You may use value filter as default option. And if there is a filter option in the options you may rewrite this property. In my example I didn't implement filter option by default that's why this solution is not so briliant, but, however, I've received a method of custom filter use.

Darmikon avatar Aug 10 '14 09:08 Darmikon