Slide 14
Slide 14 text
JusBrasil's auto-complete
Simpler tests?
function autocomplete(){
this.$inputElement = this.$('input', this.context);
this.$('.results', this.context).on('click', '.auto-item', {AC:this}, function(e)
{
e.data.AC.onItemSelected( (e.data.AC.selectedItem = $(this)), e );
return;
}).on('mouseenter','.auto-item',{AC:this},function(e){
e.stopPropagation();
var autoComplete = e.data.AC;
autoComplete.selectedItem && autoComplete.selectedItem.removeClass('selected');
autoComplete.selectedItem = $(this).addClass('selected hover');
}).on('mouseleave', '.auto-item', {AC:this}, function(e){
var autoComplete = e.data.AC;
autoComplete.selectedItem.removeClass('hover');
});
this.$inputElement.on('keydown', bind(this, function(event) {
var code = event.keyCode;
if ( code === this.KEYCODE.UP || code === this.KEYCODE.DOWN || code === this.
KEYCODE.ESCAPE ){
if ( code === this.KEYCODE.ESCAPE ){
this.$inputElement.blur();
return;
}
this.selectedItem.removeClass('selected');
var resultList = this.$('.auto-item',this.context);
var idx = resultList.index(this.selectedItem);
var nextIdx = idx + (code === this.KEYCODE.DOWN ? 1 : -1);
if ( nextIdx >= resultList.length ) nextIdx = 0;
this.selectedItem = resultList.eq(nextIdx);
this.selectedItem.addClass('selected');
return false;
}
else {
if ( code === this.KEYCODE.ENTER ){
this.onItemSelected(this.selectedItem, event);
} else if ( code === this.KEYCODE.BACKSPACE ){
this.onBackspace();
}
}
if ( this.keyAssist(code) ){
clearTimeout(this.serverCallTimeout);
if (this.ajaxObject && typeof this.ajaxObject === 'object'){
this.ajaxObject.hasOwnProperty('abort') && this.ajaxObject.abort();
}
var that = this;
var executionTime = 50;
this.serverCallTimeout = setTimeout(function(){
var trim = false;
that.fieldAssist(that.$('input', that.context), 'query', trim);
if ( !that.beforeSearch({ 'query' : that.query }) ) { return; }
var executeJS = true;
that.ajaxObject = that.serverCall('list')
.kwargs(that.getKwArgs())
.success(bind(that, function(data){
that.afterSearch({ 'query' : that.query, 'result' : data });
}), executeJS)
.noloading()
.send();
}, executionTime);
}
}))
};