sproutcore - search menu with dynamic content

Question

i'm trying to create the same thing as shown in the sproutcore doc http://docs.sproutcore.com/

the searchfield on the left side and its dynamically changing content below. i have set up the SC.ListView with its contentBinding and my fixtures are all shown.

how can i connect the input from a SC.TextFieldView with the content of my SC.ListView? can someone provide an helpful link or maybe point in the right direction?

thank you

Answer 1

So your list view content is driven by an ArrayController. You can extend that controller and create an App.FilteringArrayController. I think the SCUI framework has some sort of filtering controller already.

App.FilteringArrayController = SC.ArrayController.extend({

    searchValue: null, // bind the value of your text field to here.

    searchValueDidChange: function(){
        this.invokeOnce(this._filterContent); // every time the value changes, filter the content
    }.observes('searchValue'),

    _filterContent: function(){
       var searchVal       = this.get('searchValue'),
           content         = this.get('content'), 
           filteredContent = [];

       // loop over content here, comparing searchVal to some property of the objects
       //  in content.  For every match, add the object to filteredContent

       // finally, set the new content. 
       // any collection views bound to this controller's arrangedObjects property will update
       this.set('content', filteredContent);

    }

});

For small to medium sized lists this will work.

EDIT -- based on you clarification in comments things are different.

Keeping a million objects on the client is not a good idea. The browser will use a ridiculous amount of memory.

So you should change the above code, when the value changes, you should initiate a call to the server. The server should do the search for you. When it returns the results (which should be limited to say 100 records) you would update the content on the controller, and the GUI would update automatically.

Needless to say, with lots of data you are going to need a highly optimized implementation on the server. You are going to have to modify your UI elements to be inactive for the search.