26 апреля 2018
Нет комментариев
В примере нужно разделить категории и товары в autocomplete. Категории в теге <b>, товары без.
$.widget("custom.groupautocomplete",$.ui.autocomplete,{ _create:function(){ this._super(); this.widget().menu("option","items",">:not(.ui-autocomplete-group)"); }, _renderMenu:function(ul,items){ var self=this; var is_bold=0; $.each(items,function(index,item){ if(item.label.indexOf("<b>")!=-1){ if(is_bold!=1){ ul.append("<li class='ui-autocomplete-group'>Категории по запросу:</li>"); } is_bold=1; } else{ if(is_bold!=0){ ul.append("<li class='ui-autocomplete-group'>Товары по запросу:</li>"); } is_bold=0; } self._renderItemData(ul,item); }); }, _renderItem:function(ul,item){ var bold=''; if(item.label.indexOf("<b>")!=-1){ bold=' class="category"'; } return $("<li"+bold+"></li>").data("item.autocomplete",item).append(item.label.replace(/(<([^>]+)>)/ig,"")).appendTo(ul); } }); $("#search").groupautocomplete({ source:"/ajax_search.php", minLength:3, select:function(event,ui){ event.preventDefault(); $(this).val(ui.item.value.replace(/(<([^>]+)>)/ig,"")); $(this).parent('form').submit(); } });
Less:
.ui-autocomplete{ max-width:400px !important; .ui-state-focus{ background:fade(@color_link,80%) !important; color:@color_white !important; border-color:transparent !important; } } .ui-menu .ui-menu-item.category{ font-weight:bold; color:@color_link; text-decoration:underline; } .ui-autocomplete-group{ padding:3px 1em 3px .4em; font-weight:700; font-size:17px; color:@color_black; margin-top:10px; } .ui-autocomplete-group:first-child{ margin-top:0; }
по теме:
http://jsfiddle.net/bcbond/p924tge8/