Skip to content
beOn edited this page Sep 13, 2010 · 2 revisions

Say you have an SC.CollectionController, we’ll call it MySite.bigCollectionController, and it’s controlling a collection of MyRecord objects. All is well… but wait!

You also have a search text field, with its value bound to a property on your bigCollectionController, searchText. Wouldn’t it be nice if, when a user put something in the search field, you could run a quick query on your DB against whatever columns you wanted, and get back a list of GUIDs for matching records, and then use that list to set a condition on your bigCollectionController?

Using OrionDB, you can do just that. See the code and notes below for usage details.


MySite.bigCollectionController = SC.CollectionController.create(
/** @scope MySite.bigCollectionController */ {

    properties: ['searchText'],
    // so you don't slam the server with irrelevant requests:
    setSearchRequestTimer: function() {
        if (mySearchTimeoutVar) clearTimeout(mySearchTimeoutVar);
        mySearchTimeoutVar = setTimeout('MySite.bigCollectionController.updateSearchCondition()',1000);
    }.observes('searchText'),

    // send a request to the server with the search field's current search options:
    updateSearchCondition: function() {
        clearTimeout(this.get('timerVar'));
        MySite.server.request('myRecord', 'search', null, {
                    'search_string': this.get('searchText'),
                    'search_columns': 'body_content,title',
                    'url': '/orion-db/FoundAd',
					'onSuccess': function(status,ajaxRequest,cacheCode,context) {
									MySite.bigCollectionController.handleServerResponse(status,ajaxRequest,cacheCode,context);
								}
                }, 
                'post');
    },

    // function to handle the server's response to the above:
    handleServerResponse: function(status,ajaxRequest,cacheCode,context) {
        if (status != '200') return null;
		if (ajaxRequest.responseText != '') {
			var matchingGuidString = ajaxRequest.responseText;
			// set this controller's conditions (preserving whatever was there before):
			var c = Testsite.foundAdsForDisplayController.get('content');
			var guidArray = new Array();
			guidArray = guidArray.concat(eval(matchingGuidString));
			conditionsObj = c.get('conditions');
			conditionsObj.guid = guidArray;
			c.set('conditions', conditionsObj);
		} else {
		    // if there are any conditions at all, make sure they don't include anything for 'guid':
			var c = Testsite.foundAdsForDisplayController.get('content');
			var tempConditions = c.get('conditions');
			if (tempConditions !== undefined) {
			    delete tempConditions.guid;
                c.set('conditions',tempConditions);
			}
		}
    }

Did you get that? There are three important thangs going on here:

  1. You use setTimeout, clearTimeout and mySearchTimeoutVar to keep the number of queries down.
  2. The timeout function calls updateSearchCondition, which sends a query to your SC.RestServer MySite.server with the action 'search'.
  3. When the server responds, MySite.server passes the response on to @handleServerResponse(status,ajaxRequest,cacheCode,context).

Once you’re inside handleServerResponse, you can find your search results as a string inside ajaxRequest.responseText (be sure to check for status 200!). eval() that string, use the array thus created to set a condition on MySite.bigCollectionController.get('content') (see above), and hey presto! You’ve got search!

Clone this wiki locally