Minimal Dropdown Select With Fuzzy Search - jQuery SimpleSelect

SimpleSelect is a jQuery plugin which turns the standard select box into a minimal clean responsive dropdown list with fuzzy search (live filter) support. The plugin supports both static and dynamic datasets.

How to use it:

1. Load the necessary stylesheet simpleSelect.css to style the dropdown list and live search field.

<link href="simpleSelect.css" rel="stylesheet">

2. Create a normal select element populated with static option data.

<select id="segment" name="segmentation">
  <option>RESTAURANTE</option>
  <option>PADARIA</option>
  <option>PIZZARIA</option>
  <option>HAMBURGUERIA</option>
  <option>CHURRASCARIA</option>
  <option>COZINHA</option>
  <option>INDUSTRIAL</option>
  <option>TESTE</option>
  <option>JAVASCRIPT</option>
  <option>PHP</option>
  <option>BRAZIL</option>
  <option>CANADA</option>
  <option>MEAN</option>
</select>

3. Load jQuery JavaScript library and the JavaScript file simpleSelect.js at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="simpleSelect.js"></script>

4. Attach the function to the select element and done.

$('#segment').simpleSelect();

5. The plugin also supports dynamic data defined in the terms array.

<select id="segment" name="segmentation">

</select>

var options = {
    terms: [
        ':D dasda',
        'RESTAURANTE',
        'PADARIA',
        'PIZZARIA',
        'HAMBURGUERIA',
        'CHURRASCARIA',
        'COZINHA',
        'INDUSTRIAL',
        'TESTE',
        'JAVASCRIPT',
        'PHP',
        'BRAZIL',
        'CANADA',
        'MEAN'
    ]
}

$('#segment').simpleSelect(options);

6. Customize the placeholder text.

$('#segment').simpleSelect({
  defaultSelected: 'Select...'
})

7. Customize the warning messages when no results found.

$('#segment').simpleSelect({
  notFoundMessage: 'No Results'
})

---

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