';
str+= '
'+this.noResultsMessage+'"'+lastQuery+'"
';
str+= '
'; //Inside
str+= '
'; //ResultBox
return str;
},
// --------------------- PRIVATE METHODS ---------------------
constructor:function(url,divID,displayQuery){
if(url){
this.queryURL = url;
}else{
str = "ERROR instantiating QueryBox.\n"+
"When instantiating QueryBox you must provide a URL to the script that will return the search results to QueryBox.\n"+
"The URL should be the path to the script we'll use to query for results.\n" +
"ex: var qbox = new marumushi.widget.LiveSearchQueryBox('http://domain.com/search.php?q=','my_div_id');\n";
console.error(str);
}
if(divID){
this.queryBoxContainerID = divID;
}else{
str = "ERROR instantiating QueryBox.\n"+
"When instantiating QueryBox you must provide the ID where QueryBox will be rendered.\n"+
"ex: var qbox = new marumushi.widget.LiveSearchQueryBox('http://domain.com/search.php?q=','my_div_id');\n";
console.error(str);
}
if(displayQuery){
this.currentQuery = displayQuery;
}
//make all these guys unique based on its own uniqueID
var id = this.queryBoxContainerID+"_";
this.inputFieldID = id+this.inputFieldID;
this.resultContainerID = id+this.resultContainerID;
this.selectedContainerID = id+this.selectedContainerID;
this.formID = id+this.formID;
var scope = this;
//hang on to dojos onload event, then initialize.
dojo.addOnLoad(function(){scope.init()});
},
init:function(){
//console.log('init',this.queryBoxContainerID,dojo.byId(this.queryBoxContainerID));
if(this.render()){
var input = dojo.byId(this.inputFieldID);
var scope = this;
if(input){
input.setAttribute("autocomplete","off");
dojo.connect(input, "onkeydown", this, this.onKeyPress );
dojo.connect(input, "focus", this, this.onTextInputFocus );
dojo.connect(input, "blur", this, this.onTextInputBlur );
input.value = this.currentQuery ? this.currentQuery : this.defaultMessage;
//override submit event, use our own.
dojo.connect( dojo.byId(this.formID), 'onsubmit',function(e){ dojo.stopEvent(e);scope.onFormSubmit(); } );
}else{
console.error('search div not found');
}
}else{
console.error('oh no, a fatal error happened while trying to render this box!');
}
},
render:function(){
var e = dojo.byId(this.queryBoxContainerID);
if(e){
e.innerHTML = this.getMarkup();
return true;
}else{
console.error(this.queryBoxContainerID+' div not found! you need this div to render a QueryBox.');
return false;
}
},
getMarkup:function(){
var value = this.currentQuery ? value='value="'+this.currentQuery+'" ': '';
var markup =
'
';
return markup;
},
setQueryValue:function(query){
var input = dojo.byId(this.inputFieldID);
if(input){
input.value = query;
}else{
console.error('querybox has not been initialized yet');
}
},
onFormSubmit:function(){
var selected = dojo.byId(this.selectedContainerID);
if(selected){
//if you changed the item markup, you will need to change the way you get to the href here too.
var url = selected.firstChild.getAttribute("href");
window.location = url;
return false;
}else{
//alert(this.searchURL);
if(this.submitOnInputBlur){
dojo.byId(this.formID).submit();
}else{
return false;
}
}
},
onKeyPress:function(event){
//console.log(event.keyCode);
switch(event.keyCode){
//key down
case 40 : this.selectPrevious(event); break;
//key up
case 38 : this.selectNext(event); break;
//escape
case 27 : this.hide(); break;
//anything else
default : this.start(); break;
}
},
selectNext:function(event){
if (!this.selectedItem) {
this.selectedCursor = this.list.length-1;
} else {
this.selectedCursor--;
}
this.selectIndex(this.selectedCursor);
if (!dojo.isIE) { event.preventDefault(); }
},
selectPrevious:function(event){
if (!this.selectedItem) {
this.selectedCursor = 0;
} else {
this.selectedCursor++;
}
this.selectIndex(this.selectedCursor);
if (!dojo.isIE) { event.preventDefault(); }
},
selectIndex:function(index){
if (this.selectedItem) {
this.selectedItem.removeAttribute("id");
this.selectedItem.className = this.listItemClass;
}
this.selectedItem = this.list[index];
if (this.selectedItem) {
this.selectedItem.setAttribute("id",this.selectedContainerID);
this.selectedItem.className = this.listItemClass+' '+this.listItemSelectedClass;
}
},
sendRequest:function(){
var scope=this;
var query = dojo.byId(this.inputFieldID).value;
this.lastQuery = query;
if(this.activeRequest){
this.activeRequest.cancel();
}
//nothing entered. hide the form
if ( query == "" ) {
this.hide();
return false;
}
this.displayLoader(true);
//send a new request
//queryURL should be the path to the script we'll use to query for results.
//ex: "http://domain.com/search.php?q="
console.error("Tsaa");
this.activeRequest = dojo.xhrGet( {
url: this.queryURL +query,
handleAs: "json",
timeout: this.requestTimeout, // millis
load: function(response, ioArgs) {
scope.onRequestData(response.results);
return response;
},
error: function(response, ioArgs) {
console.error("HTTP status code: ", ioArgs.xhr.status);
return response;
}
});
},
/**
* TODO:
* probably want to switch visibility to on/off. loading is not good.
*/
displayLoader:function(value){
var path = '/static/images/querybox/';
var imageURL = value ? 'ajax-loader.gif' : 'search-icon-light.gif';
dojo.byId(this.inputFieldID).style.backgroundImage='url('+path+imageURL+')';
},
highlightString:function(str,query){
/*
Grrr I hate regex!
this should be way more efficient with something like this:
var regex = new RegExp("(.+?)"+query+"(.+?)","g");
str.replace(regex,'$1
$2$3');
return str;
but I just can't get it going properlly. any ideas?
*/
var n = str.indexOf(query);
if(n>=0){
before = str.substr(0,n);
word = str.substr(n,query.length);
after = str.substr(n+query.length);
str = before+'
'+word+''+after;
//console.log(str);
}
return str;
},
onRequestData:function(data){
this.displayLoader(false);
var len = data.length;
var markup = len == 0 ? this.getNoResultsMarkup(this.lastQuery) : this.getDropDownMarkup(data);
var container = dojo.byId(this.resultContainerID);
if(container){
container.innerHTML = markup;
//make the container visible
container.style.display = "block";
//create a list of all item divs so we can loop over them on keypress
var queryClass = '#'+this.resultContainerID+" ."+this.listItemClass;
this.list = dojo.query(queryClass);
this.selectedCursor = 0;
}else{
alert("container not found");
console.error('container:'+this.resultContainerID+'was not found.')
}
},
hide:function() {
this.selectIndex(-1);
dojo.byId(this.resultContainerID).style.display = "none";
},
onTextInputBlur:function(){
var input = dojo.byId(this.inputFieldID);
if(input.value == '' ){input.value=this.defaultMessage};
var scope = this;
window.setTimeout(function(){scope.hide();},400);
},
onTextInputFocus:function(){
var input = dojo.byId(this.inputFieldID);
if(input.value == this.defaultMessage ){
input.value='';
}else{
input.select();
}
},
start:function() {
var scope = this;
if (scope.timer) {
window.clearTimeout(scope.timer);
}
scope.timer = window.setTimeout(function(){scope.sendRequest();},scope.keyDownTimeout);
}
});