Filter with input box

[levipadre]

Hi,

Thanks for the great library! Does anybody know how can I filter properly with an input box? The filtering is working almost perfectly, just when I delete some character (or everything) from the text from the search box, I didn't get back the proper/full list. Here is my current code:

<div id="isotopeContainer" isotope-container>
   <div class="isotope-item {{x.class}}" ng-repeat="x in List | filter:search | orderBy: title " isotope-item>
      <p>{{x.title}}</p>
   </div>
</div>

<input type="text" ng-model="search.title" />

Thanks, L

[joeldavuk]

I implemented it with the help of zurb's text change library and there is an existing example of search filtering on metafizzy demos, http://www.zurb.com/playground/jquery-text-change-custom-event

There is probably a cleaner way please comment if you do have an easier way of implementing this, I had the issue with the layout but after adding the debounce it worked fine.

    var $quicksearch = $('.quicksearch');

    $quicksearch.on('textchange',function() {
        if($(this).val().length == 0) {
            $scope.$emit('iso-option', {name: 'filter', params: '*'});
            $scope.$emit('iso-method', {name: 'reloadItems'});
            var s = angular.element('#isotopeContainer').scope();
            var items = [];
            s.$apply(s.posts = items);
        }
    });
    // use value of search field to filter
    $quicksearch.on('keyup', debounce(applySearch,100));

function applySearch() {

        qsRegex = new RegExp($quicksearch.val(), 'gi');

        $scope.$emit('iso-option', {
            name: 'filter', params: function () {
                return qsRegex ? $(this).text().match(qsRegex) : true;
            }
        });
        $scope.$emit('iso-method', {name: 'reloadItems'});
        var s = angular.element('#isotopeContainer').scope();
        var items = [];

        angular.forEach(orig_items, function (obj) {
            // obj.fields to search , combine into one string
            var content = obj.content.rendered + obj.title.rendered + obj.type;
            var qsRegex = new RegExp($quicksearch.val(), "gi");
            if (content.match(qsRegex)) {

                if(!obj.experience.indexOf(selectedKeyword) && selectedKeyword!= null) {
                    //do nothing
                } else {
                    items.push(obj);
                }


            }
        });
        s.apply(s.posts = items);
    }

 // debounce so filtering doesn't happen every millisecond
    function debounce(fn, threshold) {
        var timeout;
        return function debounced() {
            if (timeout) {
                clearTimeout(timeout);
            }
            function delayed() {
                fn();
                timeout = null;
            }

            timeout = setTimeout(delayed, threshold || 100);
        }
    }

[udayms]

I am having a problem with this solution... Wondering how you got around this issue...

1. I am getting the message - Uncaught TypeError: s.apply is not a function
2. Sometimes the s.posts is missing in that object as well

Any ideas?

[joeldavuk]

Are you sure your element has the id #isotopeContainer or whatever you've named it is reflected in the js? @udayms

[udayms]

Yes. and angular.element('#isotopeContainer').scope(); is returning an object.

s object:

DOM

[udayms]

It's just the s.apply that doesn't work. I googled for this and came across https://github.com/angular/angular.js/issues/9515 which says I should set $compileProvider.debugInfoEnabled(false) to true for that to work. Tried that. Didn't work.

[udayms]

Even changing it to $apply didn't work. Changing to $apply stops the console errors. But, then the list is filtered.