Question

I’m having a problem defining a context for the plugin to search.

The thing is, i have multiple input-texts (the user can add more and more from a button) and i’m doing something like this:

$('.inp_txt').quicksearch('ul.myList li');

For each input-text, i have a list, like a selectbox, the displays the results while typing. The problem is, when the user starts typing on the first input, the plugin displays all of the .myList from all the other inputs. I need it to display only the list from the input-text where the user are.

I think i cannot use diferent classes for each list and call the plugin for each one specifically, because more inputs can be added via JS while navigating.

Is there anyway i can define the context, using $(this) or something else, so the plugin knows its to search only in that specific list?

Thanks!

Answer 1

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.