Question

I’m fairly new to jQuery and would really appreciate some help with the following:

I’ve got an input form that allows user to select 3 different geo regions (country, region and city) All information comes from an API. I’d need the input from country (as the user types) to go into the URL that makes the call to the API for “city”. This way the user gets only the cities relevant to the country.

This is what I have:

<input type="text" name="country" id="country" />
<input type="text" name="city" id="city" />

$(document).ready(function() {
        $("#country").tokenInput("http://someurl.com/search?q=", {
            method: "POST",
            searchDelay: 0,
        });

        $("#city").tokenInput("http://someurl.com/search?q=[Insert values form country input field]", {
            method: "POST",
            searchDelay: 0,
        });
    });

The jQuery plugin I’m using: this.

Answer 1

I don’t see it documented but the source of the plugin code allows a function to be used for the url option.

This should work:

$("#city").tokenInput(function(){
      return 'http://someurl.com/search?country='+ $('#country').val() +'q=';
     }, {
      method: "POST",
      searchDelay: 0,
});

If it gives you any problem, inspect the request in a browser console to see what the final url generated is, or see if any errors are thrown