Home / JavaScript / Range Sliders

:muscle::ballot_box_with_check: A jQuery plugin that turns regular select boxes into Quicksilver-like, flex-matching, incremental-finding controls.

flexselect: a jQuery plugin FlexSelect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls. Flex matching a few keystrokes against longer strings is a boon in productivity for typists. Appl
Information
Category: JavaScript / Range Sliders
Watchers: 10
Star: 237
Fork: 49
Last update: Mar 16, 2023
Resource links
http://rmm5t.github.com/jquery-flexselect/
https://github.com/rmm5t/jquery-flexselect

flexselect: a jQuery plugin

FlexSelect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls.

Flex matching a few keystrokes against longer strings is a boon in productivity for typists. Applications like Quicksilver, LaunchBar, and Launchy have made this method of keyboard entry a popular one. It's time to bring this same functionality to web controls. FlexSelect does that for select boxes.

Usage

First, load jQuery, the LiquidMetal scoring algorithm, and the plugin:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>

Now, let's attach it to your select boxes on DOM ready:

<pre>
  jQuery(document).ready(function() {
    jQuery("select.flexselect).flexselect();
  });
</pre>

This will turn all select elements with a class of flexselect:

<select class="flexselect" id="president name="president">
  <option value="1">George Washington</option>
  <option value="2">John Adams</option>
  <option value="3">Thomas Jefferson</option>
  ...
</select>

into a bad-ass autocompleting text box with flex matching support.

For more usage and examples: http://rmm5t.github.io/jquery-flexselect/

Inspired by:

Todo

  • Review the "picked" logic
  • Add templating support for matched list output.
  • Add highlighting of matched characters in the results.
  • Consider support for optgroup tags

Author

Ryan McGeary (@rmm5t)

License

MIT License

7 Open More issues
Closed

Compatibility with windows 8

I'm having an issue in windows 8 in which the list only contains 2 elements instead of the usual 6~.

Here is a picture of how it looks on windows 7: c3l

Here is a picture of how it looks on windows 8: zgoicdp

These were both using google chrome. If you need any more info let me know.

opened Feb 5, 2014 by Mormaii 8
Closed

New setting 'blankSortBy' + minor bug fixes

This new setting allows a different sort to be used when the input is blank. 'initial' sort type does not apply any sorting, so will appear in the same order as the original select options.

Minor bug fixes as detailed in 'Bug Fixes' commit

opened Sep 16, 2016 by colbysargentcodes 6
Closed

[Feature require]Show "No match found" on mismatch & not to focus after selecting an item

  1. I think showing a friendly notice is better than showing a blank list. Maybe someone won't notice there's a blank list under the input(text) field.
  2. Another function I need is not to focus after selected an item. Because some website focus on the input field (especially text field) if the value which user typed is mismatch with the rule(like date format, or username which contains some symbols like ~?,;' )
  3. BTW, though the source code is easy to read, a documentation to the settings or a tutorial is needed.

Thx. : )

more-information-needed 
opened Feb 7, 2014 by skys215 6
Closed

this.hidden set to string instead of jquery object

Patch:

diff -u jquery.flexselect.js.1 jquery.flexselect.js
--- jquery.flexselect.js.1      2010-07-12 14:37:24.000000000 -0400
+++ jquery.flexselect.js        2010-07-12 14:32:15.000000000 -0400
@@ -55,7 +55,8 @@
     renderControls: function() {
       var selected = this.select.children("option:selected");

-      this.hidden = $("<input type='hidden'/>").attr({
+      this.hidden = $('<input type="hidden"/>');
+      this.hidden.attr({
         id: this.select.attr("id"),
         name: this.select.attr("name")
       }).val(selected.val());
opened Jul 12, 2010 by tedfordgif 6
Closed

flexselect is not compatible with IE 9 (when running in compatibility mode).

Basically it doesn’t filter the list while typing.

opened Mar 2, 2012 by rishaq 4
Closed

ie6 \ 7 does not run properly

In ie6 \ 7 the next input character does not match the filter display

opened Jan 30, 2012 by ihitao 4
Open

When initialising on dynamic selects it does not populate

I load in my select dynamically like below, and it nearly works except the UL generated by flex select is empty

(Otherwise this awesome, I hate to point this out!! an ideas ?)

  • I even added a half-second delay to make sure it had populated first

function loadActivitySelect() {

var $activityContainer = $('#ActivitySelectContainer');

$.ajax({
    type: 'GET',
    url: '/MyGames?handler=ActivitySelect',
    contentType: 'application/json',
    dataType: 'html',
    success: function (response) {
    
    // Appends a select to this element

        $activityContainer.empty();
        $activityContainer.append(response);
        var $activitySelect = $activityContainer.find('select');

        setTimeout(function () {


            $activitySelect.flexselect();
        }, 500);

    },
    failure: function (response) {

        $activityContainer.empty();
    }
});

}

opened May 20, 2022 by GlynnPowell 0
Open

Problem with Safari/Mac

The plugin works fine except that there is a problem with Safari on Mac. The problem is that, with the number of possibilities listed under a control limited to 10, there is no scroll-bar to access the other possibilities. (With the other browsers that I have tested there is a scroll bar and therefore no problem.)

This can be demonstrated by visiting the page https://rmm5t.github.io/jquery-flexselect/ using Safari on Mac (I'm using Safari version 14.1.1 and macOS version 11.4) On focussing the right-hand flexselect control for 'Pick a U.S. President' only the first 10 presidents are listed, and there is no scroll bar to allow the user to see the other possibilities. I realise that the user can access these other presidents by typing a few letters from their name, but in some situations the user may not be able to think of the name they want.

I would expect the same problem on Safari on iPhone but have not checked this.

opened Jun 5, 2021 by sbrumby 0
Open

how can i expand options when dom is ready?

Hi, is it possible to expand options when dom is ready or when a procedure is met?

opened Feb 19, 2019 by csandreas1 0
Open

A bugfix for the repeated focusing issue

Currently there's an issue in behavior which allows to enter an irrelevant value into the input. The steps to reproduce are as follows:

  • Start typing an irrelevant value
  • Click on that value (it must become selected after that)
  • Click elsewhere to make the input lose focus. After that an irrelevant value stays in the input. The reason is that when we click on the input, the focus handler is called and therefore the "abbreviationBeforeFocus" variable is initialized with new irrelevant value from the input. The bugfix is to prevent the component from repeated focusing.
opened Jan 18, 2019 by erhead 0
Open

Minor bug fixes

Line 108: Show results if picked option is blank. If a blank option was present, results would previously not show on focus.

Line 315: Change setValue.val(""); to setValue("");. This will now set original select's value to blank as intended. Previously this would have no effect and instead keep previously selected values. Fixes issues #13 and #37.

opened Apr 13, 2017 by colbysargentcodes 3
Open

using flexselect with jquery 2.2

Hi,

I am using flexselect jquery with jquery version 2.2. In this key up and key down is not working properly

Advance Thanks

opened Apr 27, 2016 by aroradinesh03 6

Contents

    ryanisaacg quicksilver - A simple game framework for 2D games in pure Rust
    websanova A jQuery select plugin
    stefangabos A small, compact, and highly configurable jQuery plugin for creating beautiful modal dialog boxes
    hernansartorio A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.
    Lepshey Selectator is a jQuery-based replacement for select boxes.
    longbill A jQuery plugin that allows user to select a date range
    Sandalf vue-bootstrap-select [email protected]/vue-bootstrap-select - Vue version of bootstrap-select.
    ankurk91 vue-jquery-mask jQuery Mask Pluginvue-jquery-mask - Vue.js v2.x component for jQuery Mask Plugin
    mixinmax A jQuery plugin that turns a one-line div into a sweet color swatch
    select2 Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
    ZFTurbo Function to calculate mAP for set of detected boxes and annotated boxes.
    AudithSoftworks A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!
    armcha Elastic view is a regular CardView, which can flex from user touches
    FriendsOfShopware A Symfony flex based template for Shopware 6
    harvesthq Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.
    amobiz RegexGen.js is a JavaScript Regular Expression Generator that helps to construct complex regular expressions.
    lk-geimfari A library that provides regular expression patterns. If you hate to write regular expressions, then expynent can help you.
    FLEXTool An in-app debugging and exploration tool for iOS
    stfalcon-studio stf vue select - most flexible and customized select
    ajarunthomas create information boxes
    vinz9 NVIDIA FleX 1.2 solver integration in TouchDesigner as a CHOP
    Share this repo

    Related Repos


    Range Sliders
    14
    a range picker of JQuery plugins
    zhangtasdq #range-picker a range picker of JQuery plugins Screenshot Examples see sample folder jsfiddle Browser Support chrome firefox IE8+ Requirements JQuery 1.7+ Usa
     
    Range Sliders
    515
    A Responsive JQuery Slider
    polarnotion Turntable.js :: A Responsive JQuery Slider A jQuery plugin that will flip through a list of images as your mouse sweeps across a container Usage All image sources need to be included in a data attribute on the li,
     
    Range Sliders
    237
    :muscle::ballot_box_with_check: A jQuery plugin that turns regular select boxes into Quick...
    rmm5t flexselect: a jQuery plugin FlexSelect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls. Flex matching a few keystrokes against longer strings is a boon in productivity for typists. Appl