Semantic UI - State Search Dropdown (Requires Semantic CSS/JS + jQuery)

semantic-ui-state-search-dropdown.html

<form class="ui form">
  <section class="field">
      <label for="shipper_state_state">
          State:
      </label>
      <div class="ui fluid search selection dropdown">
          <input type="hidden" name="shipper_state_state">
          <i class="dropdown icon"></i>
          <div class="default text">Select State</div>
          <div class="menu">
              <div class="item" data-value="">State</div>
              <div class="item" data-value="AL">Alabama</div>
              <div class="item" data-value="AK">Alaska</div>
              <div class="item" data-value="AZ">Arizona</div>
              <div class="item" data-value="AR">Arkansas</div>
              <div class="item" data-value="CA">California</div>
              <div class="item" data-value="CO">Colorado</div>
              <div class="item" data-value="CT">Connecticut</div>
              <div class="item" data-value="DE">Delaware</div>
              <div class="item" data-value="DC">District Of Columbia</div>
              <div class="item" data-value="FL">Florida</div>
              <div class="item" data-value="GA">Georgia</div>
              <div class="item" data-value="HI">Hawaii</div>
              <div class="item" data-value="ID">Idaho</div>
              <div class="item" data-value="IL">Illinois</div>
              <div class="item" data-value="IN">Indiana</div>
              <div class="item" data-value="IA">Iowa</div>
              <div class="item" data-value="KS">Kansas</div>
              <div class="item" data-value="KY">Kentucky</div>
              <div class="item" data-value="LA">Louisiana</div>
              <div class="item" data-value="ME">Maine</div>
              <div class="item" data-value="MD">Maryland</div>
              <div class="item" data-value="MA">Massachusetts</div>
              <div class="item" data-value="MI">Michigan</div>
              <div class="item" data-value="MN">Minnesota</div>
              <div class="item" data-value="MS">Mississippi</div>
              <div class="item" data-value="MO">Missouri</div>
              <div class="item" data-value="MT">Montana</div>
              <div class="item" data-value="NE">Nebraska</div>
              <div class="item" data-value="NV">Nevada</div>
              <div class="item" data-value="NH">New Hampshire</div>
              <div class="item" data-value="NJ">New Jersey</div>
              <div class="item" data-value="NM">New Mexico</div>
              <div class="item" data-value="NY">New York</div>
              <div class="item" data-value="NC">North Carolina</div>
              <div class="item" data-value="ND">North Dakota</div>
              <div class="item" data-value="OH">Ohio</div>
              <div class="item" data-value="OK">Oklahoma</div>
              <div class="item" data-value="OR">Oregon</div>
              <div class="item" data-value="PA">Pennsylvania</div>
              <div class="item" data-value="RI">Rhode Island</div>
              <div class="item" data-value="SC">South Carolina</div>
              <div class="item" data-value="SD">South Dakota</div>
              <div class="item" data-value="TN">Tennessee</div>
              <div class="item" data-value="TX">Texas</div>
              <div class="item" data-value="UT">Utah</div>
              <div class="item" data-value="VT">Vermont</div>
              <div class="item" data-value="VA">Virginia</div>
              <div class="item" data-value="WA">Washington</div>
              <div class="item" data-value="WV">West Virginia</div>
              <div class="item" data-value="WI">Wisconsin</div>
              <div class="item" data-value="WY">Wyoming</div>
          </div>
      </div>
  </section>
</form>

<script>
$(document).ready(function() {
  $('.ui.dropdown')
    .dropdown()
  ;
});
</script>