Country/State Dynamic Drop Down List - javascript

If you go to http://profile.microsoft.com and edit your personal information, you will select your country. When a country is selected the city and/or state information changes based on what is expected for that country. Does anyone have any examples on how to accomplish this? Is there any service (free service) that provides this information?

Because you tagged your question with "jquery", here is an example of a "Depending / Cascading Selectbox" (which you are searching)
Demo

Regarding the data: Country, State, Province WebService?

The CascadingDropdown control will give you this behavior.

You have to use Javascript to dynamically populate the city/state SELECT tag whenever the country SELECT tag is changed, which you can catch using an Event Handler.

Well it's based on your IP tracking, you can find users country via his IP address, all the list of Cities, for specific countries you can find somewhere and add it to your functionality, also you probably need some ajax functions for filing up drop downs or even better a JSON.

Related

Input with a list of options

Basically, what I want:
When I start entering the name of a city, I get a drop-down list of options that match the letters I've typed in. I want to firstly use some data which I create manually (like 10 cities with the same name, I don't really care about it for now), but I can't figure out the way to make it work - should I use both input and select and somehow hide select behind input, or using just an input tag would be enough?
This is called autocomplete and there are many tutorials online that will walk you through the process. Here are a couple:
https://www.tutsplanet.com/autocomplete-js-simple-pure-vanilla-javascript-autocomplete/
https://www.w3schools.com/howto/howto_js_autocomplete.asp
You can find many others, including on YouTube.
Some considerations in choosing a tutorial: do you wish to populate the search suggestions from a back-end database, or only from a variable in javascript? If from a database, what back-end language do you want to use (PHP? Node.js?) Which database (MySQL? SQL?)

Address Auto complete using Google Maps API

I am currently using google maps api to suggest addresses as user types into an input field. When they select one of the drop down suggestions provided by google, the state/province gets automatically updated.
I was wondering if there was a way to update the state/province without selecting the suggestions google provides? Maybe a user neglects to select a provided option, how do you then automatically update the state/province
example - https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
Since the data is stored in google's database,I don't think you can update automatically if you don't click on an element of the list, because if you don't click, the google object is not created.
You can still try to convert the value of your input text into a google object but i don't think it's possible (if it is not a google.maps.places.Autocomplete object you can't use getPlace() ).
I tried it already because i was facing the same problem and din't find a solution either, maybe you will manage to convert the input into a google.maps.places.Autocomplete object. It's the only way if you want to use the data of google.

Hide extra data in select field?

I am dynamically generating a select drop-down menu and was curious if there was a viable option to include additional information, perhaps a related database ID into the option value of the form. I am handling all the data flow using Javascript/Ajax and would like to know if this is possible in order to save database resources.
if no other way you can put db id as value . user will not see that.
<option value="CA+":"id+":"+something >California -- CA </option>
data manipulation depends on you - explode or split the value of option
anyway ..does not look good. !!!

how to populate the state and city in my project without using AJAX and refresh page?

I am looking a sample for the functionality where there are 2 drop downs. One is 1 is State/Province and the 2rd is City. Based on the state drop down selection, city drop down values should be populated.
I need sample database design also....
Could anyone please help me out on getting a sample for this.
Regards
padman..
With neither Ajax nor refreshes? Bad idea, unless you have a very limited number of state/city combinations--otherwise the HTML/JavaScript you send will be huge.
Otherwise it's a simple dependent select, which is searchable on the web. The nutshell version is that when your state changes, you take the value of the selected state option, use it to look up cities in a map of state id => cities, and use the cities collection to populate the second select box.
The state/cities JavaScript structure is created on the server side using whatever template mechanism the rest of the app uses (I assume JSP or Velocity since you're using Struts 1).
DB DB design for what? States and cities? Have a table of states. Have a table of cities with a state id foreign key.

Autocomplete for textfield in Sencha Touch?

I'm making an flight search app with Sencha Touch and have encountered a small problem.
I want to create a textfield for all the airports and need autocomplete functionality for in order to make it easy for the user to choose departure airport and return airport. How can i implement this? The airports will be loaded via XML-schema and I can't seem to find any good documentation for this feature.
Thanx in advance!
Since there were no custom components out there and I needed something like this myself as well, I smashed it together.
So, here it is. Sencha Touch 2 Autocomplete Textfield component:
https://github.com/martintajur/sencha-touch-2-autocomplete-textfield
It currently uses AJAX request response for populating the autocomplete matches. It also supports custom input by the user.
When serializing the form data, the value of this type of input will be:
the selected item ID in case user has selected a matched autocomplete result
the typed text when the user has not chosen an autocomplete result
It is very basic at the moment and completely driven by own need for such a control.
Feel free to fork, modify, adapt. It's MIT-licenced.
I think you should use a searchfield instead of textfield as suggested by #Ismailp,
Then you should create a popup(a panel) in its keyup event, which should contain a list of Airports.
Go through the hidden folder list-search in the example folder in downloaded sencha framework.It shows how to search through a list.

Categories

Resources