Disable autocomplete dynamically


I’m having problems developing something that seems very easy:

  1. I have a countries DropDownList

  2. I have a cities autocomplete input field.

  3. I only want the autocomplete to work when there is ‘Spain’ selected in the DDL.

  4. I don’t want the autocomplete to work when the other choices are selected.

It seems easy but don’t know how to get through this.

Can someone help me please?

For this you need to use jQuery…

There are few options depending on your need

One would be:

  • render the city dropdown as disabled…

  • bind the "blur" event to the country field

  • check that the selected value is SPAIN and in that case enable the city dropdown

The other option is:

  • render both dropdowns normaly

  • bind to the "focus" event of the city field

  • check that the country selected value is SPAIN and in that case do whatever you need… like display a nice message like "can be used only for SPAIN"

Hello mdomba,

Thank you for your response. Maybe I didn’t explain enough.

  1. The Country field is a SELECT without any AJAX.

  2. The cities is an INPUT with the usual YII/AJAX autocomplete with all the spanish cities.

So when (COUNTRY != SPAIN) I want the autofill in the cities INPUT to be disabled (don’t want to autofill all the cities of the world).

Anyway you gave me some ideas, I’ll try…

Thank you!