jQuery Plugin For Nice Select Input Lists

bpListSelect is a jQuery plugin that creates a sliding panel with predefined selection options that append to your text input.

jquery select plugin with search, jquery custom select dropdown, how to select option using jquery, jquery select box example, searchable multi select dropdown plugin with jquery

A Small, Draggable JavaScript Library for Defining the DOM | Box Selection

How to make use of it:

1. Create a text input that displays a sliding selection panel/menu on focus.

<input type="text" id="demo" placeholder="Choose a city" autocomplete="off">

2. Include the jQuery library and the jQuery bpListSelect plug-in on the webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bp-list-select.plugin.js"></script>

3. Connect to the plugin and add a set of predefined options to the sliding panel.

$('#demo').bpListSelect([
  "Zagreb",
  "London",
  "Mexico City",
  "Kilimanjaro",
  "Bali",
  "Madrid",
  "Prague",
  "Sydney",
  "Taipei",
  "Tokyo",
  "Beijing",
  "Berlin",
  "Amsterdam",
  "New York",
  "Paris",
  "San Francisco",
  "Warsaw"
  ].sort()
);

4. CSS Styles Required.

.bp-list-select { overflow: hidden; }

.bp-list-select * {
  font-weight: 400;
  font-size: 30px;
  margin: 10px;
  opacity: 0.1;
  transition: opacity 0.5s;
  cursor: pointer;
  display: inline-block;
}

.bp-list-select *.bp-active { opacity: 0.7; }

.bp-list-select *:hover { opacity: 1 !important; }

jQuery Plugin For Sliding Select Input, bpListSelect Plugin/Github