class UsState
constructor: (@id, @name, @numElectoralVotes) ->
###
@param {String} query
@return {Boolean}
###
matchesQuery: (query) ->
query = query.toLowerCase()
@id.toLowerCase() is query or @name.toLowerCase().indexOf(query) >= 0
###
@static
@param {Array<UsState>} usStates Sorted in place.
@return {Array<UsState>} Same reference to input array, now sorted.
###
@sort: (usStates) ->
usStates.sort (leftState, rightState) ->
leftName = leftState.name.toLowerCase()
rightName = rightState.name.toLowerCase()
switch
when leftName < rightName then -1
when leftName > rightName then 1
else 0
###
@return {String} Serialized state.
@see fromString()
###
toString: -> JSON.stringify @
###
@static
@param {String} serializedState
@return {UsState}
@see toString()
###
@fromString: (serializedState) -> $.extend new UsState(), JSON.parse serializedState
# DOM ready
$ ->
$state = $ '#state'
$stateMessage = $ '#stateMessage'
$state.typeahead
matcher: (item) -> item.matchesQuery this.query
sorter: UsState.sort
highlighter: (state) -> $.fn.typeahead.Constructor.prototype.highlighter.call @, state.name
updater: (state) ->
state = UsState.fromString state
$stateMessage.html "<strong>#{state.name}</strong> has #{state.numElectoralVotes} electoral votes."
state.name
source: [
new UsState 'AL', 'Alabama', 9
new UsState 'AK', 'Alaska', 3
new UsState 'AZ', 'Arizona', 11
new UsState 'AR', 'Arkansas', 5
new UsState 'CA', 'California', 55
new UsState 'CO', 'Colorado', 10
new UsState 'CT', 'Connecticut', 8
new UsState 'DE', 'Delaware', 3
new UsState 'FL', 'Florida', 27
new UsState 'GA', 'Georgia', 17
new UsState 'HI', 'Hawaii', 4
new UsState 'ID', 'Idaho', 4
new UsState 'IL', 'Illinois', 21
new UsState 'IN', 'Indiana', 11
new UsState 'IA', 'Iowa', 7
new UsState 'KS', 'Kansas', 6
new UsState 'KY', 'Kentucky', 8
new UsState 'LA', 'Louisiana', 7
new UsState 'ME', 'Maine', 5
new UsState 'MD', 'Maryland', 10
new UsState 'MA', 'Massachusetts', 11
new UsState 'MI', 'Michigan', 15
new UsState 'MN', 'Minnesota', 9
new UsState 'MS', 'Mississippi', 6
new UsState 'MO', 'Missouri', 10
new UsState 'MT', 'Montana', 3
new UsState 'NB', 'Nebraska', 4
new UsState 'NV', 'Nevada', 7
new UsState 'NH', 'New Hampshire', 5
new UsState 'NJ', 'New Jersey', 13
new UsState 'NM', 'New Mexico', 5
new UsState 'NY', 'New York', 31
new UsState 'ND', 'North Dakota', 3
new UsState 'NC', 'North Carolina', 15
new UsState 'OH', 'Ohio', 20
new UsState 'OK', 'Oklahoma', 6
new UsState 'OR', 'Oregon', 7
new UsState 'PA', 'Pennsylvania', 21
new UsState 'RI', 'Rhode Island', 3
new UsState 'SC', 'South Carolina', 9
new UsState 'SD', 'South Dakota', 4
new UsState 'TN', 'Tennessee', 11
new UsState 'TX', 'Texas', 34
new UsState 'UT', 'Utah', 5
new UsState 'VT', 'Vermont', 3
new UsState 'VA', 'Virginia', 15
new UsState 'WA', 'Washington', 12
new UsState 'WV', 'West Virginia', 4
new UsState 'WI', 'Wisconsin', 10
new UsState 'WY', 'Wyoming', 3
]
<input type="text" id="state" />
<p id="stateMessage">Choose a US state.</p>
body {
margin: 25px;
}
External resources loaded into this fiddle: