Convenient Data Selector With jQuery And Bootstrap - BoxAutocomplete Selector

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.