I'm coding a sign up interface where the user enters their state and then their city.  I've implemented autocomplete on the state field which is working properly.  However, how do I include the contents of the state field with the call to autocomplete the city field?

 

I have not seen a demo that describes this.  Have I missed it?

At one point, I'd seen "extraParams" used, but read a reference that its been deprecated.  Is that true? 

If so, do I need to somehow add the the state value to the "URL.term" variable?

 

I have confirmed through Fiddler Web Debugger that URL.state is not being sent as expected in the code below. Right now, a list of all cities is returned regardless of what state they are in.

 

Thanks for any help or advice.

 

 <link rel="stylesheet" href="/jQuery/jquery-ui.css" />
 <script type="text/javascript" src="/jQuery/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="/jQuery/jquery-ui.js"></script>

 <script type="text/javascript">
  
  $(function() {
   $("#state").autocomplete({
    source: "/includes/findStates.cfm",
    minLength: 1
   });

  });

 

  $(function() {
   $("#city").autocomplete({
    source: "/includes/findCities.cfm",
                extraParams: {
                    state: function() {return $('#state').val()}
                },
    minLength: 1
   });
  });

 </script>

 

<form action="index.cfm"  method="post">
<fieldset>
<legend>jQuery UI Autocomplete Example - ColdFusion Backend</legend>
<p>Start typing the name of a state or territory of the United States</p>
<p class="ui-widget"><label for="state">State: </label><input type="text" id="state"  name="state" /></p>
<p class="ui-widget"><label for="city">City: </label><input type="text" id="city"  name="city" /></p>
</fieldset>
</form>