Minimal Dropdown Select With Fuzzy Search - jQuery SimpleSelect

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.

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.

  • Publication date: 25.03.2018
  • Source