Question

I have two input fields on my page which one of them is for data A {list of cities from a db} and a second input field for data B {list of name from a db}

The problem is that when both are initiated , then the second autocomplete source appear on the second one.

Here is some code:

jQuery("#cities_input").autocomplete({
        source: citiesResFromDb
    });

jQuery("#names_input").autocomplete({
        source: namesResFromDb
    });

How can I use or init .autocomplete() on two different input fields without affecting each other?

Answer 1

You can assign a function to source and with its parameter you can return any object you want; try to use request parameter and its properties to determinate which control you are dealing with.

        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },