Example-SuggestBox.png

Live example

See ListWebSearch

CSS

html>body .suggestItems{
width: 422px;
}
.suggestItems{
width: 400px;
position: absolute;
padding: 11px 0px;
margin: 0px;
z-index: 500;
left: 5px;
top: 27px;
}
.suggestItems ul{
list-style: none;
list-style-position: outside;
margin: 0;
padding: 0;
background: #FFFFFF url($xwiki.getSkinFile('suggestBg.png')) repeat-x scroll 0 0;
border: 2px solid #ccc;
border-top: none;
}
.suggestItems ul li{
padding: 5px 0 0;
margin: 0;
text-align: left;
}
.suggestItems ul li a{
display: block;
text-decoration: none;
background-color: transparent;
position: relative;
padding: 0;
width: 100%;
}
.suggestItems ul li a .suggestItem{
display: block;
padding: 0;
margin: 0;
clear: both;
}
.suggestItems ul li a:focus .suggestItem{
   outline: dotted 1px #000;
}
.suggestItems ul li a .suggestItem .suggestItemName{
text-align: left;
width: 60%;
color: #4D4D4D;
display:inline-block;
font-weight: bold;
font-size: 90%;
padding-left: 6px;
margin: 0px;
}
.suggestItems em{
background-color:#F7FF94;
padding:0;
margin: 0;
text-decoration: inherited;
}
.suggestItems ul li a:hover .suggestItem .suggestItemName,
.suggestItems ul li a:hover .suggestItem .suggestItemName em{
text-decoration: underline;
}
.suggestItems ul li a:hover .suggestItem .suggestItemInfo .suggestItemInfoHighlight{
color: #39397F;
text-decoration: none;
}
.suggestItems ul li a .suggestItem .suggestItemInfo{
text-align: right;
color: #aaa;
font-size: 90%;
width: 36%;
vertical-align: top;
display:inline-block;
padding-right: 6px;
margin: 0px;
}

HTML Code

<div class="suggestItems">
<ul>
<li>
<a href="#" id="1">
<span class="suggestItem">
<span class="suggestItemName">
Base<em>Wiki</em> Documentaire
</span>
<span class="suggestItemInfo">
<span class="suggestItemInfoHighlight" title="$msg.get('xe.search.item.type.wiki.title')">xwiki</span> &gt; <span class="suggestItemInfoHighlight" title="$msg.get('xe.search.item.type.space.title')">Main</span>
</span>
</span>
</a>
</li>
<li>
<a href="#" id="2">
<span class="suggestItem">
<span class="suggestItemName">
Projet Internet et Intranet X<em>Wiki</em> Isoc Refondation
</span>
<span class="suggestItemInfo">
<span class="suggestItemInfoHighlight" title="$msg.get('xe.search.item.type.space.title')">XWiki</span>
</span>
</span>
</a>
</li>
</ul>
</div>

Dependencies

CSS

See SearchBox. To keep proportions the control is dependent of the width of

.searchQuery

Icons

suggestBg.png suggestBg.png

Translations

xe.search.item.type.wiki.title=Wiki
xe.search.item.type.space.title=Space
Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected