Search Terms

implement

by thatgreg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
<label>
  <div class='label'>Select Search Term Parameter</div>
  <select name='default' data-chosen-options='{}'></select>
</label>

CSS

body {
  font-family: sans-serif;
  font-size: .8em; }
label {
  display: block;
  margin-bottom: 1.4em; }
  label .label {
    font-weight: bold;
    margin-bottom: .2em; }
select {
  width: 14em; }

JavaScript

jQuery(function($) {
  // Create a set of OPTION elements
  var words = ["advisory_committee", "advisory_committee_description", "ao_statement", "applicant", "city", "date_received", "decision_code", "decision_date", "docket_number", "expedited_review_flag", "fed_reg_notice_date", "generic_name", "openfda", "pma_number", "supplement_number", "supplement_reason", "supplement_type", "trade_name"],
      options = $($.map(words, function(word) {
        return $(document.createElement('option')).text(word)[0];
      }));
  $('select').each(function() {
    // Add the dummy OPTIONs to the SELECT
    var select = $(this).append(options.clone());
    // Initialize Chosen, using the options from the
    // `data-chosen-options` attribute
    select.chosen(select.data('chosen-options'));
  });
});