/**
* jQuery Plugin for creating AJAX auto-suggest textfield
* @version 2.1
* @requires jQuery 1.4 or later
*
* Copyright (c) 2011 Lucky
* Licensed under the GPL license:
* http://www.gnu.org/licenses/gpl.html
*/
(function($) {
function autosuggest(callBackUrl, textField){
this.divId="suggestions_holder";
this.hovered=false;
this.arrData=null;
this.textField=textField;
this.callBackUrl=callBackUrl;
var width=this.textField.width() + 3;
var minChars=1;
var currRow=0;
var suggestRow="suggest_row";
var suggestItem="suggest_item";
this.idField=null;
this.submitOnSelect=true;
this.thumbnail=false;
this.description=false;
this.textField.after('
');
this.textField.attr("autocomplete", "off");
this.holder=this.textField.next("#" + this.divId);
this.holder.hide();
this.onSelected=null;
var me=this;
this.textField.keyup(
function(e){
if(e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40 && e.keyCode!=13){
if($(this).val().length>=minChars){
$.ajax({
url:me.callBackUrl + encodeURI($(this).val()),
success:function(data){
try{
me.arrData=$.parseJSON(data);
var arr=me.arrData;
var html="";
currRow=0;
if(arr==null){
me.hide();
}
else{
if(arr.length>0){
for(i=0;i';
}
var desc="";
if(me.description==true){
if(arr[i].description!=undefined){
desc='' + arr[i].description + '
';
}
}
html+='' + thumb + '
' + arr[i].data.replace(new RegExp('(' + me.textField.val() + ')', 'gi'), "$1") + '
' + desc + '
';
}
me.holder.html(html);
for(i=1;i<=arr.length;i++){
var target=me.holder.find("#" + suggestRow + i);
target.mouseover(function(e){
me.hovered=true;
me.unSelectAll(this);
$(this).addClass("selected");
});
target.mouseout(function(e){
me.hovered=false;
$(this).removeClass("selected");
});
target.click(function(e){
me.textField.val($(this).find(".suggestion_title").text());
if(me.idField!=null){
me.idField.val($(this).attr("id_field"));
}
// Callback function
if(me.onSelected!=null){
me.onSelected.call(this, me.arrData[$(this).attr("seq_id")]);
}
if(me.submitOnSelect==true){
$("form").has(me.textField).submit();
}
me.hide();
});
}
me.show(me.holder.find("." + suggestItem).height() * arr.length);
}
else{
me.hide();
}
}
}
catch(e){
}
},
error: function(xhr, status, ex){
}
});
}
else{
me.hide();
}
}
else{
if(me.holder.css("display")!="none"){
checkKey(e);
}
else{
// Callback function
if(me.onSelected!=null){
me.onSelected.call(this, null);
}
}
}
}
);
this.textField.bind(
"blur",
function(e){
if(me.idField!=null){
if(me.checkSelected(me.textField.val())==false){
me.textField.val("");
me.idField.val("");
}
}
if(me.hovered==false){
me.hide();
}
else{
me.hovered=false;
}
}
);
this.show=function(height){
this.holder.css({
"position":"absolute",
"left":this.textField.position().left + "px",
"top":this.textField.position().top + this.textField.height() + 5 + "px",
"height":height + "px"
});
this.holder.css({
"width":width + "px"
});
this.holder.find("." + suggestItem).css({
"width":width + "px",
"overflow":"hidden"
});
this.holder.show();
}
this.hide=function(){
this.holder.hide();
}
this.unSelectAll=function(div){
var id=$(div).attr("id");
var rows=this.holder.find("." + suggestItem).get().length;
for(i=1;i<=rows;i++){
this.holder.find("#" + suggestRow + i).removeClass("selected");
}
currRow=parseInt(id.replace(suggestRow, ""));
var rgx=/^[0-9]+$/;
if(!rgx.test(currRow)){
currRow=0;
}
}
this.setWidth=function(w){
width=w;
}
this.setMinChars=function(c){
minChars=c;
}
this.preventEnter=function(){
this.textField.keypress(
function(e){
if(e.keyCode==13){
return false;
}
return true;
}
);
}
this.checkSelected=function(data){
if(this.arrData!=null){
for(var i=0;i0){
me.holder.find("#" + suggestRow + (currRow-1)).removeClass("selected");
}
var target=me.holder.find("#" + suggestRow + currRow);
target.addClass("selected");
me.textField.val(target.find(".suggestion_title").text());
if(me.idField!=null){
me.idField.val(target.attr("id_field"));
}
}
else{
currRow=rows;
}
}
else if(e.keyCode==38){
currRow--;
if(currRow>0){
if(currRow0){
me.onSelected.call(this, me.arrData[currRow-1]);
}
else{
me.onSelected.call(this, null);
}
}
me.hide();
}
}
else{
// Callback function
if(me.onSelected!=null){
me.onSelected.call(this, null);
}
}
return true;
}
}
$.fn.coolautosuggest = function(options) {
var settings = {
width: null,
minChars: null,
idField: null,
submitOnSelect: true,
showThumbnail : false,
showDescription : false,
onSelected : null
};
$.extend(settings, options);
return this.each(function() {
var obj = new autosuggest(settings.url, $(this));
if(settings.width!=null){
obj.setWidth(settings.width);
}
if(settings.minChars!=null){
obj.setMinChars(settings.minChars);
}
if(settings.idField!=null){
obj.idField=settings.idField;
obj.preventEnter();
}
if(settings.submitOnSelect==true){
obj.submitOnSelect=true;
}
else{
obj.preventEnter();
}
if(settings.showThumbnail==true){
obj.thumbnail=settings.showThumbnail;
}
if(settings.showDescription==true){
obj.description=settings.showDescription;
}
/*if(obj.idField!=null){
if(obj.checkSelected(obj.textField.val())==false){
obj.textField.val("");
obj.idField.val("");
}
}*/
if($.isFunction(settings.onSelected)==true){
obj.onSelected=settings.onSelected;
}
});
}
})(jQuery);