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 http://jsearchdropdown.sourceforge.net/

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
        // http://www.greywyvern.com/code/opera/bugs/selectScrollTop
        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 || $.browser.chrome)
            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 http://jsearchdropdown.sourceforge.net/ (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