jdecuyper.github.com by jdecuyper

July 11, 2013

Select 2: display currently selected value

Example is based on following SHA:24716bc872.

Select2 is a great alternative for the standard select box (check it out: Select2).

One project required a specific behavior to be added to Select2. When the user clicks on the searchbox, the currently selected value disappears and if you want it back, you need to type it back in.

Since I was going to add several Select2 on the same page containing up to 6000 options each, I needed a way to have the current value available for edit or copy/paste. When clicking on the select box, current value must be displayed as follow:

I added a new global boolean value (called keepValOnSearch) that indicates whether or not the current selected option must be displayed or not:

if (initial === true && opts.keepValOnSearch && search.val() == "" && opts.element.attr("multiple") == undefined) {      
    var selected = opts.element.find(":selected");
    search.val(selected.text());
}

The selected value can only be applied to the single select boxes.

Select 2: display selected value and allow item repetition

Example is based on following SHA: 24716bc872.

Select2 (multi)

Repetition is allowed:

Repetition is not allowed (default behavior):

Select2 (single)

Display current value:

Do not display current value (default behavior):

Select 2: use regular expression to search through huge list

Following example is based on select2 SHA: 24716bc872.

A list of words will be searched through every time the user starts typing some letter into the the searchbox. For efficiency purposes, instead of using an array, all words are part of the same string and separated by brackets.

An array could be used but it would slow down the search, at least if you are are planning to use a large number of words, otherwise using an array might be more than enough. Brackets are used to separate words from each other, it is a limitation because brackets might be part of the words but it could be easily replaced by another special character that you know has no occurence inside the list of words.

Both select2 controls are initialized at the same time, use the same search query and the same data source.

The data source contains 50 random names, here is how the beginning of the list looks:

var itemList = '"Pamela Carino""Jeannette Kyler""Burton Holle""Emerita Berney""Jaye Marcial"';

The search query goes as follow:

query: function (query) {
    var search = query.term;
    var resultsText = $('#results_text');
    var resultsCount = $('#results_count');
    // prevent starting the search if no search term was provided
    if (!search) {
        resultsText.val('');
        resultsCount.val('0');
        return;
    }
    var data = { results: [] }, i, j, s;
    // use regular expression to find all entries matching the search term
    // the gi modifier is used to do a case insensitive search
    var rx = new RegExp('"([^"]*' + search + '[^"]*)"', 'gi');
    var i = 0, results = '';
    // obtain all matches and push them inside the result list that will be displayed 
    while (result = rx.exec(itemList)) {
        data.results.push({ id: result[1], text: result[1] });
        i += 1;
        if (i >= 100) // only 100 results are shown at a time
            break;
    }
    resultsText.val(results);
    resultsCount.val(i);
    query.callback(data);
}

Have a look at the source code of this page to see how it works