Convert Selects Into Dropdowns In Bootstrap - SelectInput
File Size: | 26.5 KB |
---|---|
Views Total: | 2709 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.