Improve Choose Packing containers And Make Choices Searchable – jQuery iv-select

Choose packing containers are a easy manner to supply customers with some selections. However typically you want extra, particularly with regards to trying to find objects from a listing.

This jQuery plugin supplies you with customized choose packing containers and a sequence of options to reinforce the interplay between person and browser. It permits you to search, present and take away choices in a choose field and supplies higher UX to the customers when choosing a number of objects.

See Additionally:

use it:

1. Obtain and cargo the iv-select.js plugin after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/iv-select.js"></script>

2. Load the required W3.css to type the choose field.

<hyperlink rel="stylesheet" href="/path/to/cdn/w3.min.css" />

3. Convert the native choose ingredient into an enhanced choose field:

<choose identify="vehicles" id="instance" a number of>
  <possibility worth="volvo">Volvo</possibility>
  <possibility worth="saab">Saab</possibility>
  <possibility worth="opel">Opel</possibility>
  <possibility worth="audi">Audi</possibility>
</choose>

$('#instance').iv_selectConvert({
  // choices right here
});

4. Set the preliminary worth(s) utilizing the data-iv-init-value attribute:

<choose identify="vehicles" id="instance" a number of data-iv-init-value="saab|audi">
  <possibility worth="volvo">Volvo</possibility>
  <possibility worth="saab">Saab</possibility>
  <possibility worth="opel">Opel</possibility>
  <possibility worth="audi">Audi</possibility>
</choose>

5. Full plugin choices to customise the choose field:

$('#instance').iv_selectConvert({
  placeholder: "Kind to go looking",
  text_el_class: "w3-input w3-border",
  text_el_style: "",
  class_for_search: "w3-block",
  search_style: "",
  class_for_value: "",
  container_class: "",
  options_container_class: "",
  options_container_style: "",
  option_class: "w3-block w3-button w3-hover-blue w3-border-left w3-border-right",
  option_style: "",
  keep_existing_class: 'toValue', // toText, toValue, toContainer
  close_after_click: true,
  no_search_element: false
});

6. Get & set values:

// get worth
$('#instance').val();

// set worth
$('#instance').val('volvo');

// set values
$('#instance').val(['volvo', 'saab']);

7. Extra strategies & properties.

// update choices
$('#instance').iv_updateOptions(choices);

// get choices
$('#instance').iv_getOptions();

// get values as an array
$('#instance').iv_getValuesArray();

// verify if is an ivSelect ingredient
$('#instance').is_ivSelect();

// verify if is a textual content ingredient
$('#instance').iv_textEl();

// clone choose field
$('#instance').iv_cloneSelect{
  identify: "",
  id: "",
  placeholder: "Kind to go looking",
  text_el_class: "w3-input w3-border",
  text_el_style: "min-width:200px;background-color:white;",
  container_class: "",
  container_style: "",
  options_container_class: "",
  options_container_style: "",
  option_class: "w3-block w3-button w3-hover-blue w3-border-left w3-border-right",
  option_style: "",
  remove_unselected: true,
  close_after_click: true
}

Changelog:

2022-09-09

This superior jQuery plugin is developed by a-sadegh63. For extra Superior Usages, please verify the demo web page or go to the official web site.