boneskull / angular-tags

Pure AngularJS tagging widget with typeahead support courtesy of ui-bootstrap
MIT License
133 stars 32 forks source link

typeaheadOpts.filter implementation - custom filter #47

Open Darmikon opened 9 years ago

Darmikon commented 9 years ago
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 commented 9 years ago

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.

boneskull commented 9 years ago

typeahead options should pass directly through... ?

Darmikon commented 9 years ago

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.