| 1 | | Not sure if this is intended but there are various examples of implementing a header (non selectable list element) but I've found that whatever I try and can't stop the default "ui-menu-item" class being applied to my listitem. I've managed to workout that the examples that work are using 1.8 but I'm using 11.0 and it's defaulting to the "ui-menu-item" and doesn't seem to be over-ridable. |
| 2 | | |
| 3 | | '''Example of working header''' |
| 4 | | |
| 5 | | http://stackoverflow.com/a/20676143/692942 |
| 6 | | |
| 7 | | http://jsfiddle.net/IrvinDominin/rMkER/ |
| 8 | | |
| 9 | | '''Code Excerpt''' |
| 10 | | |
| 11 | | |
| 12 | | {{{ |
| 13 | | $("#list").autocomplete("instance")._renderMenu = function(ul, items) { |
| 14 | | var self = this; |
| 15 | | $.each( items, function( index, item ) { |
| 16 | | self._renderItemData(ul, item); |
| 17 | | // prepended element still ends up with "ui-menu-item" class?? |
| 18 | | if (index == 0) ul.prepend('<li class="ui-header"><span>Returned ' + items.length + ' record(s)</span></li>'); |
| 19 | | }); |
| 20 | | // attempt to hack css! |
| 21 | | ul.find("li:first-child").removeClass("ui-menu-item"); |
| 22 | | }; |
| 23 | | }}} |
| 24 | | |
| 25 | | I've now pin pointed what I think is the cause it appears after 1.10.4 and is present in 1.11.0 it's in the refresh() method in menu.js (previously jquery.ui.menu.js). |
| 26 | | |
| 27 | | It looks like it's due to the requirement for an anchor to be present being removed (see https://github.com/jquery/jquery-ui/blob/3a61627a501cb7ba1ce80046bfabbff0f7f2f517/ui/jquery.ui.menu.js#L325 and https://github.com/jquery/jquery-ui/commit/3a61627a501cb7ba1ce80046bfabbff0f7f2f517#commitcomment-7591515) |