The problem you're having is that your syntax applies a single plug-in instance to all items in your selector.
$('.inp_txt').quicksearch(...)
is like calling ('.inp_txt').click(...)
- you're going to get one handler which is used for every element which matches.
To get around this, you need to do something like:
$('.inp_txt').each(function (index, value) {
var $input = $(value);
// Get a reference to the list you want for this input...
var $quickSearch = $('ul.myList li');
$input.quicksearch($quicksearch);
});
This code will loop through each of the .inp_txt
items and apply a unique handler for each one.
In your scenario, it sounds like you have only one ul.myList
- which may be another reason why you're always seeing the same list. If that is the case, you might consider something like...
<div>
<input type="text" class="inp_txt" />
<ul class="myList">
<li>...</li>
</ul>
</div>
Then you can adapt the above code to something like:
$('.inp_txt').each(function (index, value) {
var $input = $(value);
var $quickSearch = $input.siblings('ul.myList');
$input.quicksearch($quicksearch);
});
This way, you're getting a unique list for each text box. Obviously, I don't know the rest of your scenario to know whether or not this is something possible in the logic of your app - but perhaps.
Finally - when you add new controls, you'll want to adapt the code which is creating them, so that you're attaching a new handler to them as well. Something like:
function addInput(/*... params ...*/) {
/* Do your logic to create the control */
$newInput.quicksearch($newList);
}
In the above code, clearly, it is assumed you would create a $newInput
element which would be your new <input type="text" />
- and a new list, which you would call $newList
.
I hope this helps - if not, please feel free to post some comments and clarify, and I'll try to adapt my answer.