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);