Published:

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

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some jQuery Help?

Search fiverr to find help quickly from experienced jQuery developers.



Supported by