Published: 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:
Everything worked perfectly except for 2 things:
- 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:
Note: This works if your font size is 12px, I haven't tested with other font sizes.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)); }); - 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); });
Need Some jQuery Help?
Search fiverr for freelance jQuery developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!