Jquery UI autocomplete - using value from a previous select field

Question

I want to autocomplete a Cities text input, but only search for cities in the country that was previously selected. The code I have seems like it should work, but it's not sending the correct country value.

The form:

Country: <select name='country' id='country'>
             <option value='US'>USA</option>
             <option value='UK'>United Kingdom</option>
         </select><br/>
City: <input type='text' name='city' id='city' />

The js:

$( "#city" ).autocomplete({
            source: "searchCities/" + $('select#country option:selected').val(),
            minLength: 2
        });

The URL structure should be 'searchCities/UK?term=foo' and the SQL statement is searching for the value of 'term' where the country code is 'UK'. If I type in the URL manually, it works without a problem (limiting to only the country)... and the autocomplete works in the form. However, it returns ALL cities without limiting by the country code.

Is there something I may be missing? Or maybe a better way to accomplish this? Thanks!

bloodcell · Accepted Answer · 2011-04-26 14:49:39Z

2

If you are not doing so already - you should modify the autocomplete's source attribute each time the select box's selected value is changed.

you can destroy and re-build the autocomplete every time the user selects a new value into the select box:

<script>
   function renewAutocomplete() {
      $( "#city" ).autocomplete("destroy");
      $( "#city" ).autocomplete({
            source: "searchCities/" + $('select#country option:selected').val(),
            minLength: 2
        });
   }
</script>
Country:
<select name='country' id='country' onchange='renewAutocomplete();'>
   <option value='US'>USA</option>
   <option value='UK'>United Kingdom</option>
</select>
<br/>
City: <input type='text' name='city' id='city' />

or maybe it is better not to destroy it and re-build it, rather modify its source attribute:

<script>
   function renewAutocomplete() {
      $( "#city" ).autocomplete("option", "source", "searchCities/" + $('select#country option:selected').val());
   }
</script>

edited Apr 26, 2011 at 14:49

answered Apr 26, 2011 at 14:41

bloodcell

6011 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TerryMatula Over a year ago

perfect. that worked. Thanks!And you're right, I didn't need to destroy it.

jimy · Accepted Answer · 2011-04-26 14:47:15Z

0

Try this one

    $("#city").unautocomplete().autocomplete(

              base_url+"index.php/index/autocompletecities/", 

              {

               extraParams:                 
                   {country:$('#country').val()} 

});

edited Apr 26, 2011 at 14:47

answered Apr 26, 2011 at 14:31

jimy

4,9183 gold badges37 silver badges52 bronze badges

1 Comment

TerryMatula Over a year ago

doesn't seem to work. Looking at Firebug, it says "unautocomplete is not a function". For what it's worth, I'm using jQuery 1.5.2 and jquery ui 1.8.12

Collectives™ on Stack Overflow

Jquery UI autocomplete - using value from a previous select field

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related