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());

$('#dd').flexselect();
$('#dd').change(function() { alert('never shows.'); }; <== never fires.

Quick fix:
In the pickSelected function add .change() after hidden.val().
pickSelected: function() {
var selected = this.results[this.selectedIndex];
if (selected) {
this.input.val(selected.name);
this.hidden.val(selected.value).change(); //<==
this.picked = true;
} else if (this.settings.allowMismatch) {
this.hidden.val("").change(); //<==
} else {
this.reset(); //Maybe fire change here?
}
}

When allowMismatch is enabled, if the user first selects an option and then enter a custom value the value of the first selected item is still associated to the field name.
It is therefore not possible to know if the user entered a custom value or picked from the list.

More info:
Option list looks like that B
$_POST['select'] => A (last option selected, even if custom value entered)
$_POST['new_select'] => B (literal value of the option, even if an option has been selected from the list)

Text highlighting?
Also is it possible to search by key or value?
Example-
key - value
bird - peacock
car - audi
car - bmw
bird - pigeon
sport - baseball

then when you type "b", it first displays baseball, then bmw and lastly the key bird arranged alphabetically by value.
Basically an option to choose b/w key or value to consider sorting and searching.

Will be so nice.

When a person uses keyboard navigation (up and down arrows) to navigate the drop-down list, when the selection goes outside the current scroll viewable area, the drop-down doesn't scroll with the selection, and the selected item isn't visible.

Make the list auto-scroll when navigating with the arrow keys.

It does not support Cyrillic letters in the options.

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

Hi,
is it possible to add an option to flexselect on the fly?

best regards
Bernd

When you paste a valid value, using the standard configuration and click with the mouse outside the box it will reset the value.

The demo shows the same behavior.

Steps to reproduce:

1. Go to the demo page
2. Click the pick an animal box
3. Paste text "moose"
4. With the mouse click outside the box

When I did this I expected to select the value if it is valid.

If you want I can make the change and pull.

Hi,

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

Advance Thanks

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. : )

Hi, I have 4 drop downs on a page, 2 of them defined as flexselect and 2 regular drop downs. When I populate them for the first time, they all work fine. When I select one of the entries from the 2 regular drop downs, I need to reset the flexselect dropdowns to blank. I do it using the statement below
$("#dropdwonName_flexselect").val("");
Then I repopulate all drop downs with new data. When I click on the flexselect dropdowns, the values are not displayed until I start typing in the drop down box. Am I doing something wrong?
Thanks for your help in advance.

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:

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

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

i'm on Windows 7 / FF 25

In the demo, I've select the item: George Washington

Then if I click the input again, the dropdown is displayed showing the only match of the list according with the input text, which ovbiulsly is also George Washington.

I think is redundant, and you display the dropdown only if the input text changes.

When the dropdown is open, enter chooses the current item. However, when the dropdown is closed, I'd like enter to submit the form.

However, I'm sure someone wouldn't want this to be the default (or only) option, so this could be a feature:

$(...).flexselect({ submitOnEnter: true });

no matter what you tap on the drop down box, the top one is selected.

There could be an option for this:

self.input.select();

https://github.com/rmm5t/jquery-flexselect/blob/master/jquery.flexselect.js#L106

when selecting an option by pressing tab, 'hello' appears in the console.

this.input.keydown(function(event) {
    switch (event.keyCode) {
          case 9:  // tab
            console.log("hello");
            self.pickSelected();
            self.hide();

When using a long list (>10 items) in a browser such as Chromium, the order of items sometimes changes when displaying the entire list.

This happens because Array.sort is not guaranteed to be stable. It is in Firefox and Safari, but in Chrome/Chromium, Opera and some versions of IE it is not. See:
https://bugzilla.mozilla.org/show_bug.cgi?id=224128
http://code.google.com/p/v8/issues/detail?id=90
http://ofb.net/~sethml/is-sort-stable.html

The sortResults function (line 198 of jquery.flexselect.js) should not rely on Array.sort being stable. Perhaps only sort the results if the input box is not empty?

Hello!

Is it possible to have link after choosing an option?
Or an anchor even?

Thanks ;)

I'd like to know if there's a standalone version of this, as a javascript only library, Thank you for reading.

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

I believe this would be useful for many developers

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.

jquery-flexselect does not support bower

Basically it doesn’t filter the list while typing.

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();
    }
});

}

Fails if optgroups are present.
In my situation, i only init flexselect on selects with 50 or more options. When there are optgroups the list doesnt get populated.

Consider the following example:

<select id="myflex" class="flexselect">
  <option value="george">George Washington</option>
  <option value="john">John Adams</option>
  <option value="thomas">Thomas Jefferson</option>
</select>
<input type="button" id="test" value="Test" />

This select is then allowed to mismatch:

$("select.flexselect").flexselect({ allowMismatch: true });
$('#test').click(function() { alert($('#myflex').val(); });

The problem occurs when the following steps are followed:

1. Start typing 'John' in the input box. That shows the 'John Adams' option. Select that.
2. Click the Test button. The alert box will show 'john'.
3. Click the input box again and clear it. Now type 'hello' in the input box.
4. Click the Test button again. Because we now input a custom value, I expect val() to return null (preferably I would like to see 'hello', but I know that's not how it works). Instead, it shows 'john' again.

The selected value basically becomes invalid as soon as you start typing in the input box. That means it should be cleared. That is very easy to achieve:

@@ -153,6 +153,8 @@
       });
 
       this.input.keyup(function(event) {
+        self.select.val('');
+
         switch (event.keyCode) {
           case 13: // return
             event.preventDefault();