Contacts search function

[DavidUnzue]

I would like to add a real-time search function for searching contacts within a collection, so I get those contacts that match the search string and render only those.

Let's assume we are working with the code for chapter 03.

In contactList.js I define an event for an input in the search field. This triggers a contacts:search event and gets the search query string passed.

class ContactListActionBar extends ModelView {
    // ...
    get events() {
        return {
            '.search-form input': 'onSearch'
        };
     }
    // ...
    onSearch(event) {
        event.preventDefault();
        var searchQuery = $(event.target).val();
        this.trigger('contacts:search', searchQuery);
    }

Then in the same file, within the controller class ContactList, I add an event listener for that event in the showList method:

showList(contacts) {
    // ...
    var actionBar = new ExperimentListActionBar();
    // ...
    this.listenTo(actionBar, 'contacts:search', this.searchContactList);
}

and the corresponding method for performing the search. This one uses a static class function defined in contactColletion.js (I won't show it here, cause it isn't relevant), which returns a promise with the found models:

searchContactList(searchQuery) {
    var findContacts = App.Collections.ContactCollection.search(searchQuery);
    findContacts.done(function(contacts){
      if(contacts.length > 0) {
        // reset ContactCollection with found contacts
      } else {
        console.log("no contacts found");
      }
    });
}

My issue is, that I don't know how to reset the collection with the found models, since I don't have access to the ContactCollection instance.
Where do I get the instance from? Should I trigger an event and pass the found contacts and then listen to that event somewhere else where I can access the collection instance? Where?.
Or should I call the method showList again and pass the found contacts? But then I'm creating and rendering the views a second time on top of the original ones...?

[abiee]

HI @DavidUnzue

Thanks for asking. Well this can be achieved in many ways, the simplest solution is to store a reference to the original collection when the list is showed.

  showList(contacts) {
    // ...
    this.contacts = contacts;
    // ...
  }

So that you can access to the contacts collection from the searchContactList() method. However I don't think this is the best solution.

If you remember, the best place to put the code for searching is in the Collection object, exactly how you did it.

class ContactCollection extends Backbone.Collection {
  // ...

  search(keyword) {
    var result = this.fetch({
      data: {
        keyword: keyword
      },
      success: (collection, response) => {
        this.trigger('search:success', response);
      },
      error: (collection, response) => {
        this.trigger('search:fail', response);
      }
    });
  }
}

This powerful function could be used as the event handler of the contacts:search event.

showList(contacts) {
    // ...
    var actionBar = new ExperimentListActionBar();
    // ...
    this.listenTo(actionBar, 'contacts:search', contacts.search);

    contacts.on('search:success', () => {
      if (contacts.length === 0) {
        alert('No items found');
      }
    });

    contacts.on('search:error', response => {
      var message = formatError(response);
      alert(message);
    });
}

[DavidUnzue]

@abiee there is an error when trying to fetch the collection in the search function. It's because within the search method this doesn't refer to the ContactCollection class, but to the ContactList controller class.