Question

Im trying with jquery to advanche an auto-complete textfield.

• user types 3 chars
• the cities gets loaded into a drop down ( with ajax autocomplete )

Now I would like to:

• Prevent the user from manually enter there city name but instead choose it from the drop down list. Is there a good way to do this? I have searched and searched but not found a good solution because the user at first have to be able to type a few chars in the textfield, for the autocomplete to be triggered.

My function so far wich works (it returns only city_name for now):

  $("#user_profile_attributes_city_id").autocomplete({
    source: "/data/living",
    minLength: 1,
    select: function( event, ui ) {
      $(this).val(ui.item.label);
      $(this).find("#country_id").val(ui.item.country_id);
      $(this).find("#city_id").val(ui.item.city_id);
      event.preventDefault;
    }
  })

Answer 1

You can put autocomplete initially,

 <input autocomplete="off" />

Actually you chould put some validation on FORM submission if the value is in a list you wanted.

 $('form#id').submit(function(){

//validate
if ($(this).val().length > 3) {
    return false;
}
if ( $(this).val()  is_in_list ) {
    return false;
}
});