two instances
two instances
Hi,
I hope somebody can help me.
I just coded a small autocomplete plugin and it acutally works quite smooth.
The problem I got is the following: whenever I try to start two instances on the same site, it only takes the settings of the 2nd one.
jQuery(document).ready(function(jQuery){
jQuery('#input1').UIAutoComplete({url:'bla.php'});
jQuery('#input2').UIAutoComplete({url:'bla2.php'});
});
So in this case the input1 and input2 would both send their data to bla2.php
Could you please tell me how to solve this problem?
Thanks in advance
(function($){
jQuery.fn.UIAutoComplete = function(options) {
var appTo = $(this);
settings = jQuery.extend({
url: '',
setUIAutoComplete: function(id, value){appTo.val(value); closeUIAutoComplete.call();},
}, options);
$(this).keyup(function(){
if($(this).val().length < 2){
closeUIAutoComplete.call();
}else{
$.ajax({
type: "POST",
url: settings.url,
data: 'q=' + $(this).val(),
dataType: 'json',
success: function(data){
console.log(data);
closeUIAutoComplete.call();
var content = '';
$.each(data, function (i, item){
if (item.picture != ''){var picture = '<img src="'+item.picture+'" height="40" />';}else{var picture='';}
content += '<div onclick="settings.setUIAutoComplete.call(0, '+"'"+item.id+"', '"+item.main_line+"'"+');" style="border:1px solid #CCC; background:#F7F7F7; cursor:pointer;"><table><tr><td rowspan="2">'+picture+'</td><td><span>'+item.main_line+'</span></td></tr><tr><td><span>'+item.sub_line+'</span></td></tr></table></div>';
});
appTo.after('<div class="UIAutoComplete" style="position:absolute;">'+content+'</div>');
}
});
}
});
closeUIAutoComplete = function(){
$('.UIAutoComplete').remove();
}
}
})(jQuery);