Chosen search box options

Demonstrates hiding the search box in a jQuery Chosen dropdown

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">




  <div class='label' >Please select your printer</div>
  <select name='conditional-search' id="sort" data-chosen-options='{ "disable_search_threshold": 4 }'></select>


  <select name='conditional-search' id="sort1" data-chosen-options='{ "disable_search_threshold": 4 }'></select>

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; }
  
input {
  width: 14em;
  width: 20%;
  }
  
  
  
  #mainDivId{
  width: 100%; 
  height: 300px;
  background-color: #59a4ff;
}

#myInput:hover {
    
	color: #D9400B;
  /*border: 4px solid #ddd;*/

}
#myInput {
  
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 12px;
  
  border: 1px solid #ddd;
  margin-bottom: 0px;
}
td, th {
    border: 0px solid #dddddd;
    text-align: left;
    padding: 0px;
}
#MainTable {
  width: 90%; 
  height: 50px;
  border: 1px;
  min-width: 100%;
  position: relative;
  opacity: 0.97;
 
  border:1px solid black; 
  padding:5px;
  padding:10px;
  /*background-color: #e91643;*/

}
#MainTable table {
  padding:5px;
    background:green;
}

/* the cell we need to test */
#test {
    padding:1px;
       
}
body {
    background:url('http://placekitten.com/800/500');
}

JavaScript

jQuery(function($) {
//ducumentation here
//https://harvesthq.github.io/chosen/#hide-search-on-single-select
//load first selector
  // Create a set of OPTION elements from some dummy data
  var words = ["HP1111", "epson", "dolor", "sit", "amet,", "consecteturconsectetur", "adipiscing", "elit", "duis", "ullamcorper", "diam", "sed", "lorem", "mattis", "tristique", "integer", "pharetra", "sed", "tortor"],
      options = $($.map(words, function(word) {
        return $(document.createElement('option')).text(word)[0];
      }));
   $("#sort").each(function() {
  //alert("test");
    // 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'));
  }); 
  
  
  
   //load second selector
      var words1 = ["select","selctt2"],
      options1 = $($.map(words1, function(word) {
        return $(document.createElement('option')).text(word)[0];
      }));
    var select1 = $( "select#sort1" ).append(options1);
    
      //var select = $(this).append(options1.clone());  
    // Initialize Chosen, using the options from the
    // `data-chosen-options` attribute
    select1.chosen(select1.data('chosen-options'));
  //}); /* */



  
  $("#sort").change(function(){
	      var words2 = ["there","hi"],
      options2 = $($.map(words2, function(word) {
        return $(document.createElement('option')).text(word)[0];
      }));
	//select1.chosen(null);
   //select1.chosen({rtl: true});
	select1.append(options2);
    //select1.chosen(select1.data('chosen-options'));
	select1.trigger("chosen:updated");
//select1.chosen("destroy");
      
      
		
  
  
  
  
});


  $("#sort1").change(function(){

    //alert('Selected value: ' + $(this).val());
    
});
  
  
  

});