YAHOO.example.BasicRemote = function() {
	
    // Use an XHRDataSource
    var oDS = new YAHOO.util.XHRDataSource("key.php");
    // Set the responseType
    oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
    // Define the schema of the delimited results
    oDS.responseSchema = {
        recordDelim: "\n",
        fieldDelim: "\t"
    };
    // Enable caching
    oDS.maxCacheEntries = 5;

    // Instantiate the AutoComplete
    var oAC = new YAHOO.widget.AutoComplete("key", "keySuggestContainer", oDS);
	oAC.allowBrowserAutocomplete = false; 
	oAC.queryDelay = 0.5;
	oAC.minQueryLength = 2;
	oAC.applyLocalFilter =true;
	oAC.queryMatchContains = true;
	oAC.queryMatchSubset  =true;

	oAC.animVert  = false;
	
	//override generateRequest - we fix query from 0-5
	oAC.generateRequest = function(sQuery){		
		oCtrl = document.getElementById("key");
		sQuery = oCtrl.value;	
		if(sQuery.length > 5) 
		{							
			sQuery = sQuery.substr(0,5);
		}
		//sQuery = sQuery.replace(/%20/g, '+');
		sQuery = asUrlEncode(sQuery);
		var dataType = this.dataSource.dataType;

		// Transform query string in to a request for remote data
		// By default, local data doesn't need a transformation, just passes along the query as is.
		if(dataType === YAHOO.util.DataSourceBase.TYPE_XHR) {
			// By default, XHR GET requests look like "{scriptURI}?{scriptQueryParam}={sQuery}&{scriptQueryAppend}"
			if(!this.dataSource.connMethodPost) {
				sQuery = (this.queryQuestionMark ? "?" : "") + (this.dataSource.scriptQueryParam || "query") + "=" + sQuery + 
					(this.dataSource.scriptQueryAppend ? ("&" + this.dataSource.scriptQueryAppend) : "");        
			}
			// By default, XHR POST bodies are sent to the {scriptURI} like "{scriptQueryParam}={sQuery}&{scriptQueryAppend}"
			else {
				sQuery = (this.dataSource.scriptQueryParam || "query") + "=" + sQuery + 
					(this.dataSource.scriptQueryAppend ? ("&" + this.dataSource.scriptQueryAppend) : "");
			}
		}
		// By default, remote script node requests look like "{scriptURI}&{scriptCallbackParam}={callbackString}&{scriptQueryParam}={sQuery}&{scriptQueryAppend}"
		else if(dataType === YAHOO.util.DataSourceBase.TYPE_SCRIPTNODE) {
			sQuery = "&" + (this.dataSource.scriptQueryParam || "query") + "=" + sQuery + 
				(this.dataSource.scriptQueryAppend ? ("&" + this.dataSource.scriptQueryAppend) : "");    
		}		
		return sQuery;
	};

	//override getSubsetMatches - only happen after 5 chars
	oAC.getSubsetMatches = function(sQuery){
		var subQuery, oCachedResponse, subRequest;
		// Loop through substrings of each cached element's query property...
		var iLength = sQuery.length;
		if(iLength > 5) iLength = 5;
		for(var i = sQuery.length; i >= iLength ; i--) {
			subRequest = this.generateRequest(sQuery.substr(0,i));
			this.dataRequestEvent.fire(this, subQuery, subRequest);
			
			// If a substring of the query is found in the cache
			oCachedResponse = this.dataSource.getCachedResponse(subRequest);
			if(oCachedResponse) {
				return this.filterResults.apply(this.dataSource, [sQuery, oCachedResponse, oCachedResponse, {scope:this}]);
			}
		}
		return null;
	};
	
	// This function returns markup that bolds the original query,
	// and also displays to additional pieces of supplemental data.	
	oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
	   var sKey = trim(sResultMatch);
	  
	   // Extract the part of the match that the user did not type
	   var sKeyRemainder = sKey.substr(sQuery.length); 

	   // some other piece of data defined by schema
	   var iCount = oResultData[1]; 

		var aMarkup = "<div class='myCustomResult'><span><div class='suggestPhrase'>" + sKey + "</div><div class='suggestCount'>" + iCount + " jobs</div></span></div>";

		return aMarkup;
	};

    return {
        oDS: oDS,
        oAC: oAC
    };
}();