CityEntry jQuery plugin
This is a jQuery plugin for selecting a state and city. For Massachusetts, Maine, and New Hampshire, the user selects a city from a dropdown list. For all other states, they can free-key the city.
The plugin relies on Chosen, a jQuery plugin that makes select boxes more user-friendly. It also uses the jQuery Validation plugin for validation.
The example highlights some of the 'gotchas' when using Chosen with the jQuery validation plugin:
- You need to explicitly ignore the input text fields that Chosen adds to it's dropdown menus:
// Used to validate chosen selects $( '.city_entry' ).parent( 'form' ).validate().settings.ignore = ":hidden:not(select), .chosen-search input";
- Add custom highlight() and unhighlight() routines which show the error on the Chosen element and not the underlying select:
// Highlight the chosen field (which is next) instead of the select $( element ).next().toggleClass( errorClass, highlight );
Installation
$ git clone https://github.com/kcaran/jquery-cityentry.git
$ cd jquery-cityentry
$ npm install
$ npm run build