В примере нужно разделить категории и товары в 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/
Для использования html в ui autocomplete добавить:
.data("ui-autocomplete")._renderItem=function(ul,item){
return $("<li></li>").data("item.autocomplete",item).append(item.label).appendTo(ul);
};Полный текст:
$("#search").autocomplete({
source:"/ajax_search.php",
minLength:3,
select:function(event,ui){
$(this).val(ui.item.value.replace(/(<([^>]+)>)/ig,""));
$(this).parent('form').submit();
}
}).data("ui-autocomplete")._renderItem=function(ul,item){
return $("<li></li>").data("item.autocomplete",item).append(item.label).appendTo(ul);
};или так, чтобы избавиться от тегов совсем:
$("#search").autocomplete({
source:"/ajax_search.php",
minLength:3,
select:function(event,ui){
event.preventDefault();
$(this).val(ui.item.value.replace(/(<([^>]+)>)/ig,""));
$(this).parent('form').submit();
}
}).data("ui-autocomplete")._renderItem=function(ul,item){
var bold='';
if(item.label.indexOf("<b>")!=-1){
bold=' style="font-weight:bold;"';
}
return $("<li"+bold+"></li>").data("item.autocomplete",item).append(item.label.replace(/(<([^>]+)>)/ig,"")).appendTo(ul);
};Вместо:
$("#search").autocomplete({
source:"/ajax_search.php",
minLength:3,
select:function(event,ui){
$(this).val(ui.item.value);
$(this).parent('form').submit();
}
});
Для вертикальной прокрутки внутри блоков, созданных с использованием fullPage, использовать параметр:
Полный пример:
$(document).ready(function(){
$('#fullpage').fullpage({
anchors:['section-0','section-1','section-2'],
menu:'#navigation',
verticalCentered:false,
scrollOverflow:true,
afterLoad:function(anchorLink,index){
if(anchorLink=='section-0'){
$('#navigation').hide();
}
else{
$('#navigation').show();
}
},
});
});<ul id="navigation">
<li data-menuanchor="section-1"><a href="#section-1">Section 1</a></li>
<li data-menuanchor="section-2"><a href="#section-2">Section 2</a></li>
</ul>
<div id="fullpage">
<div data-anchor="section-0" class="section section-0"></div>
<div data-anchor="section-1" class="section section-1"></div>
<div data-anchor="section-2" class="section section-2"></div>
</div>
.section-0{
background:red;
}
.section-1{
background:green;
}
.section-2{
background:blue;
}
#navigation{
position:fixed;
top:100px;
left:20px;
z-index:100;
}
#navigation li.active a{
color:red;
}http://alvarotrigo.com/fullPage/
https://github.com/alvarotrigo/fullPage.js
