-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (129 loc) · 5.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery.cityentry.js - Select City and State using chosen.js</title>
<!-- $Id: index.html,v 1.3 2014/05/07 17:52:09 caran Exp $ -->
<link href="css/chosen.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<main role="main">
<h1>CityEntry jQuery plugin</h1>
<p>
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.
</p>
<p>
The plugin relies on Chosen, a jQuery plugin that makes select boxes more user-friendly. It also uses the jQuery Validation plugin for validation.
</p>
<form action="#" method="get" autocomplete="off">
<fieldset class="city_entry">
<select class="state_list" id="ad_locstate" name="ad_locstate">
<option>MA</option> <option>ME</option> <option>NH</option> <option>AK</option> <option>AL</option> <option>AR</option> <option>AZ</option> <option>CA</option> <option>CN</option> <option>CO</option> <option>CT</option> <option>DC</option> <option>DE</option> <option>FL</option> <option>GA</option> <option>HI</option> <option>IA</option> <option>ID</option> <option>IL</option> <option>IN</option> <option>KS</option> <option>KY</option> <option>LA</option> <option>MA</option> <option>MD</option> <option>ME</option> <option>MI</option> <option>MN</option> <option>MO</option> <option>MS</option> <option>MT</option> <option>NC</option> <option>ND</option> <option>NE</option> <option>NH</option> <option>NJ</option> <option>NM</option> <option>NV</option> <option>NY</option> <option>OH</option> <option>OK</option> <option>OR</option> <option>PA</option> <option>PR</option> <option>RI</option> <option>SC</option> <option>SD</option> <option>TN</option> <option>TX</option> <option>UT</option> <option>VA</option> <option>VT</option> <option>WA</option> <option>WI</option> <option>WV</option> <option>WY</option>
</select>
<select data-placeholder="Choose a city…" class="chosen-select city_list" id="ad_loccityname" name="ad_loccityname">
<option></option>
</select>
<input style="display: none" type="text" class="city_input" id="ad_loccity" name="ad_loccity" placeholder="Enter non-MA/ME/NH city">
</fieldset>
<input type="submit" value="submit">
</form>
<br style="clear: both">
<p>
The example highlights some of the 'gotchas' when using Chosen with the jQuery validation plugin:
</p>
<ul>
<li>You need to explicitly ignore the input text fields that Chosen adds to it's dropdown menus:<br>
<pre>
// Used to validate chosen selects
$( '.city_entry' ).parent( 'form' ).validate().settings.ignore =
":hidden:not(select), .chosen-search input";
</pre>
</li>
<li>Add custom highlight() and unhighlight() routines which show the error on the Chosen element and not the underlying select:<br>
<pre>
// Highlight the chosen field (which is next) instead of the select
$( element ).next().toggleClass( errorClass, highlight );
</pre>
</li>
</ul>
<h3>Installation</h3>
<pre><code>$ git clone https://github.com/kcaran/jquery-cityentry.git
$ cd jquery-cityentry
$ npm install
$ npm run build
</code></pre>
<h3>Resources</h3>
<ul>
<li><a href="https://github.com/kcaran/jquery-cityentry">Github repository</a></li>
<li><a href="https://harvesthq.github.io/chosen/">Chosen project</a></li>
<li><a href="https://github.com/kcaran/chosen/">My fork for Chosen</a></li>
<li><a href="https://jqueryvalidation.org/">jQuery Validation</a></li>
</ul>
</main>
<script src="scripts/jquery-3.7.0.min.js"></script>
<script src="scripts/jquery.validate.min.1.19.5.js"></script>
<script src="chosen.jquery.min.js"></script>
<script src="cities.js"></script>
<script src="jquery.cityentry.js"></script>
<script>
var labelErrorClass = 'highlight_error';
function get_init_data()
{
var city, state;
if (state = GetURLParameter( 'ad_locstate' )) {
if (state === 'MA' || state == 'ME' || state === 'NH') {
city = GetURLParameter( 'ad_loccityname' );
}
else {
city = GetURLParameter( 'ad_loccity' );
}
return { "city" : city, "state": state };
}
// Here are some test initial data sets
return { "city" : '', "state" : '' };
return { "city" : "NEWPORT", "state": "ME" };
return { "city" : "NEW BOSTON", "state": "NH" };
return { "city" : "CAMBRIDGE", "state": "MA" };
return { "city" : "Juneau", "state": "AK" };
}
function GetURLParameter( q, s )
{
s = s ? s : window.location.search;
var re = new RegExp( '&' + q + '(?:=([^&]*))?(?=&|$)', 'i' );
return (s = s.replace( /^\?/, '&' ).replace( /\+/g, ' ' ).match( re ))
? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1]))
: undefined;
}
function validate_highlight( element, highlight, errorClass, validClass )
{
if ($( element )[0].validate_highlight) {
return $( element )[0].validate_highlight( element, highlight, errorClass, validClass );
}
validate_toggle( element, highlight, errorClass, validClass );
}
function validate_toggle( element, highlight, errorClass, validClass )
{
$( element.form ).find( 'label[for=' + element.id + ']' ).toggleClass( labelErrorClass, highlight );
$( element ).toggleClass( errorClass, highlight ).parent( 'label' ).toggleClass( labelErrorClass, highlight );
}
$( document ).ready( function() {
admo_validator = $( 'form' ).validate({
errorPlacement: function( error, element ) {},
'highlight': function( element, errorClass, validClass ) {
validate_highlight( element, true, errorClass, validClass );
},
'unhighlight': function (element, errorClass, validClass) {
validate_highlight( element, false, errorClass, validClass );
}
});
// Initial conditions set through javascript
var init_data = get_init_data();
$( '.city_entry' ).cityentry( init_data.state, init_data.city );
});
</script>
</body>
</html>