acSelect.js - Custom select box replacement
October 24, 2013

Recently I needed to find a component that will replace the typical HTML select element and improve the user’s UI/UX. I have decided to use select2 Select2 (jQuery based replacement for select boxes; it supports searching, remote data sets, and infinite scrolling of results). The component itself is great but a little complicated and it makes the customization of HTML and CSS not that simple. Having this on mind, soon I've decided to replace select2 and create a simple plugin which contains some of the basic structure and functionality as the select2 plugin.

The use case behind this was that I wanted to implement a component that enables searching through a list of items and allows they to be selected (in my case it was about videos that I wanted to put in my collection). With every character typed in the input field, a list of sorted results that contains the inputted term will appear. When a certain result is selected, it is added to the list of selected results and therefore it is removed from the list of possible results.

I’ve named it acSelect.js (because the searching and the selecting is done with the jQuery AutoComplete widget) and it is available at my github account. It’s the first version and I'll keep improving it.

How to use acSelect?

The structure is quite simple. You just need to add select or input element with a unique id and its parent should have "ac-select-container" class.

1. Select element example

<!-- HTML - simple select, only with title -->
<div class="ac-select-container short">
  <select multiple="multiple" name="collection[video_ids][]" id="collection1" class="hidden">
    <option value="1">Flight</option>
    <option value="2">Argo</option>
    <option value="3">Life of Pi</option>
    <option value="4">The Hobit</option>
    <option value="5">Ted</option>
    <option value="6">Madagascar 3</option>
    <option value="7">Linkoln</option>
    <option value="8">The Croods</option>
<!-- HTML - advanced select with title and image (through data attribute) -->
<div class="ac-select-container short">
  <select multiple="multiple" name="collection[video_ids][]" id="collection2" class="hidden">
    <option data-image="images/flight.jpg" value="1">Flight</option>
    <option data-image="images/argo.jpg" value="2">Argo</option>
    <option data-image="images/life_of_pi.jpg" value="3">Life of Pi</option>
    <option data-image="images/the_hobit.jpg" value="4">The Hobit</option>
    <option data-image="images/ted.jpg" selected="selected" value="5">Ted</option>
    <option data-image="images/madagaskar.jpg" value="6">Madagascar 3</option>
    <option data-image="images/lincoln.jpg" value="7">Lincoln</option>
    <option data-image="images/the_croods.jpg" value="8">The Croods</option>

Initializing the plugin with the default options is as simple as this:

$(function() {

2. Input element example (data send through acSelectData and acPreSelectData options)

<!-- HTML - input select -->
<div class="ac-select-container short">
  <input type="text" placeholder="Search any term..." id="collection3">

To initialize the plugin with options:

$(function() {
  var selectData = [
    {id: 1, title: "Flight", thumbnail: "images/flight.jpg"},
    {id: 2, title: "Argo", thumbnail: "images/argo.jpg"},
    {id: 3, title: "Life of Pi", thumbnail: "images/life_of_pi.jpg"},
    {id: 4, title: "The Hobbit", thumbnail: "images/the_hobbit.jpg"},
    {id: 6, title: "Madagascar 3", thumbnail: "images/madagaskar.jpg"},
    {id: 7, title: "Lincoln", thumbnail: "images/lincoln.jpg"},
    {id: 8, title: "The Croods", thumbnail: "images/the_croods.jpg"}
  var preselectData = [
    {id: 5, title: "Ted", thumbnail: "images/ted.jpg"}
      acLabel: "title",
      acImage: "thumbnail",
      acSelectData: selectData,
      acPreSelectData: preselectData

Check this github repository to see complete version of the code and click here to see how it works.