Convert Selects Into Dropdowns In Bootstrap - SelectInput

SelectInput is a jQuery/Bootstrap plugin that takes options from a regular select box and converts them into an advanced dropdown list for better styling & user experience. Currently only supports the latest Bootstrap 3 framework.

More features:

• Also supports input field.
• Autocomplete integrated.
• Easy to customize using your own CSS.
• Lots of options & event handlers.

How to use it:

1. To begin, include both jQuery library and Bootstrap framework on the webpage.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Then include the Select Input plugin's files on the webpage.

<link href="./src/css/selectinput.css" rel="stylesheet" />
<script src="./src/js/selectinput.js"></script>

3. Finally, attach the function selectinput to the select element and done.

<select id="selectinput" class="form-control">
  <option value="1">Canada</option>
  <option value="2">Poland</option>
  <option value="3">Latvia</option>
  <option value="4" disabled>Bulgaria</option>
  <option value="5">Russia</option>
  <option value="6">Ukraine</option>
  <option value="7">Germany</option>
  <option value="8">United Kingdom</option>
  <option value="9" selected>Sweden</option>
  <option value="10" disabled>Australia</option>
  <option value="11">United States</option>
  <option value="12">Norway</option>
</select>

$('#selectinput').selectinput({
  // options here
});

4. Apply the autocomplete functionality to the dropdown. Note that you first need to define an array of suggestions in a JSON file.

// country.json
["Afghanistan", "Albania", "Algeria", "Andorra", ...]

// country.json
["Afghanistan", "Albania", "Algeria", "Andorra", ...]

4. Apply the autocomplete functionality to the dropdown. Note that you first need to define an array of suggestions in a JSON file.

$('#selectinput').selectinput({
  autocomplete: 'country.json'
});

5. You can also generate a dropdown list from an input field as follows:

<input type="text" id="selectinput" class="form-control" placeholder="Type your country...">

$('#selectinput').selectinput({
  autocomplete: 'country.json'
});

6. Full plugin options to customize the dropdown:

$('#selectinput').selectinput({

  // assign a unique ID to the dropdown if needed
  id: null, 

  // default CSS classes
  dropdownClass: '.dropdown .selectinput',
  listClass: '.dropdown-menu', 
  itemClass: '.dropdown-item',
  toggleClass: '.btn .btn-default .dropdown-toggle', 

  // toggle text
  toggleText: 'Dropdown',

  // toggle caret
  toggleCaret: '<span class="caret"></span>',

  // change the toggle text 
  toggleChange: true,

  // path to JSON
  autocomplete: false,

  // min length to toggle the autocomplete
  minInput: 2,

  // custom rendering template
  templates: {
    inputField: '<input type="text" autocomplete="false" class="form-control" />',
    autocompleteList: '<div class="autocomplete dropdown-menu" />',
    autocompleteItem: '<li><a class="item" href="#" /></li>'
  }

});

7. Available callback functions.

$('#selectinput').selectinput({

  onChange: function onChange() { },
  onShow: function onShow() { },
  onShown: function onShown() { },
  onHide: function onHide() { }, 
  onHidden: function onHidden() { }, 
  onAutocompleteSuccess: function onAutocompleteSuccess() { },
  onAutocompleteError: function onAutocompleteError() { }, 
  onAutocompleteShow: function onAutocompleteShow() { },
  onAutocompleteShown: function onAutocompleteShown() { }, 
  onAutocompleteHide: function onAutocompleteHide() { }, 
  onAutocompleteHidden: function onAutocompleteHidden() { },

});

Changelog:

2020-04-27

• Fixed value from json for autocomplete

---

This awesome jQuery plugin is developed by wdmg. For more Advanced Usages, please check the demo page or visit the official website.