Convenient Data Selector With jQuery And Bootstrap - BoxAutocomplete Selector
File Size: | 11 KB |
---|---|
Views Total: | 2364 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
BoxAutocomplete Selector is a jQuery/Bootstrap plugin which allows you to build some awesome data selectors and link them to your input fields. A little similar to the combo box and dual list box.
Features:
- Ajax enabled.
- Both Text and JSON data supported.
- Seachable.
How to use it:
1. Include the following CSS files in the head section of your html page.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <link rel="stylesheet" href="/path/to/font-awesome.min.css"> <link rel="stylesheet" href="bootstrap-boxautocomplete.css">
2. Include jQuery library and other required JS resources at the bottom of the page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script> <script src="boxautocomplete.jquery.js"></script>
3. Create a normal text input field for the data selector.
<input type="text" class="demo form-control" >
4. Call the function on the text input and add your custom data using the data
array.
$('.demo').boxautocomplete({ data: [{'name': 'Paris', 'value': 1}, {'name': 'Moscow', 'value': 2}, ...] });
5. Possible plugin options with default values.
$('.demo').boxautocomplete({ data: [], // If set to an URL, the data is ignored and the plugin is getting the data form the given URL with AJAX dataUrl: false, // text|json valueFormat: 'text', // In case the format is text delemiter: ";", // Hides the input of the selector hideInput: true, // Display the search bar search: false, searchPlaceholder: "Search for an element...", searchButtonText: "Clear", // The min amount of leters before the search is launched searchMin: 1, uniqueValue: true, withAmount: false, amountPositive: true, amountStep: 1, amountInit: 1, withCategory: false, allCategories: false, allCategoriesText: "All", });
Change log:
2016-07-06
- Adding amount selector + category filter
2016-05-31
- New version : AddDataItem, addSelectedItem, convert value to selection
This awesome jQuery plugin is developed by Djagu. For more Advanced Usages, please check the demo page or visit the official website.