December 16 2011

jQuery Searchable DropDown - fixes for IE9 bug and dynamically added items

I recently tried out the jQuery Searchable DropDown (v1.0.7) from

Everything worked perfectly except for 2 things:
  1. In IE9, when you scroll down the select list a bit, the highlighted item starts to lag behind the cursor, so far that the cursor can be 4 or 5 items lower than the highlighted menu item.

    To fix this I added the following code to the selector.mousemove function in jquery.searchabledropdown-1.0.7.src.js:
    // IE9 fix
    if ($.browser.msie && parseInt(jQuery.browser.version) >= 9)
        fs = 13.8

    The complete selector.mousemove function now looks like this:
    selector.mousemove(function (e)
        // Disabled on opera because of <select> elements always return scrollTop of 0
        // Affects up to Opera 10 beta 1, can be removed if bug is fixed
        if ($.browser.opera && parseFloat(jQuery.browser.version) >= 9.8)
            return true;
        // get font-size of option
        var fs = Math.floor(parseFloat(/([0-9\.]+)px/.exec(selectorHelper.option(0).css("font-size"))));
        // calc line height depends on browser
        var fsdiff = 4;
        if ($.browser.opera)
            fsdiff = 2.5;
        if ($.browser.safari || $
            fsdiff = 3;
        fs += Math.round(fs / fsdiff);
        // IE9 fix
        if ($.browser.msie && parseInt(jQuery.browser.version) >= 9)
            fs = 13.8
        // set selectedIndex depends on mouse position and line height
        selectorHelper.selectedIndex(Math.floor((e.pageY - selector.offset().top + this.scrollTop) / fs));
    Note: This works if your font size is 12px, I haven't tested with other font sizes.
  2. When adding items dynamically to the list using .append(), the new items weren't selectable unless search text was entered first. If I tried selecting a new list item without searching, the selected option would revert back to the first option in the list.

    You can see this behaviour on the plugin site itself at (as at the time of this writing at least)

    This was caused by the new option not having it's index defined with the "lang" attribute (eg: <option lang="25">...</option>), so after adding an item to the dropdown list, I set all of the item indexes with the following:
    // update searchable dropdown list option indexes
    $("select option").each(function (i)
        $(this).attr("lang", i);

Sponsored by