Dynamic Ediable Combo Box Plugin - jQuery Combo.js

File Size: 7.63 KB
Views Total: 616
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dynamic Ediable Combo Box Plugin - jQuery Combo.js

Combo.js is a lightweight jQuery plugin that converts standard select dropdowns into dynamic, editable combo boxes. 

How to use it:

1. Add the Combo.js plugin's files to your jQuery project.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Combo.js -->
<link rel="stylesheet" href="/path/to/combojs.css" />
<script src="/path/to/combojs.js"></script>

2. Add the combojs attribute to your select dropdown and the plugin will do the reset.

<select combojs="languages">
  <option value="1">jQuery</option>
  <option value="2">JavaScript</option>
  <option value="3">CSS/CSS3</option>
  <option value="4">HTML5</option>
  <option value="5">React.js</option>
  <option value="6">Vue.js</option>
</select>

3. Get the selected option as a JSON string.

JSON.stringify($("#languages").val())

4. Get all the options as a JSON array.

JSON.stringify($combo("languages").items)

5. Set the selected option.

$combo("languages").setSelected(2, "JavaScript");

6. Add new options to the combo box.

$combo("languages").add([
  { label: "Python", value: 7 },
  { label: "Go", value: 8 } 
]);

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