Example-SearchBox.png

Live example

See ListWebSearch

CSS

#searchBar{
margin-bottom: 11px;
padding-left: 5px;
clear: both;
}
#searchBar select {
border: 2px solid #CCCCCC;
color: #4d4d4d;
font-size:15px;
}
.searchQuery{
background:transparent url($xwiki.getSkinFile("search.png")) center left no-repeat;
display:inline-block;
padding-left:18px;
border: 2px solid #CCCCCC;
color: #4d4d4d;
font-size:15px;
width: 400px;
}
.searchButton{
background-color:#B3B3B3;
border:2px solid #B3B3B3;
color:#FFFFFF;
font-size:11px;
font-variant:small-caps;
font-weight:bold;
height:23px;
line-height:12px;
}
.searchHelp{
font-size: 80%;
color: #808080;
}

HTML Code

#macro(spaceoption $space $selectspace $spacesText)
  <option value="$spacesText.get($space)" #if($selectspace == $spacesText.get($space))selected="selected"#end>$space</option>
#end

#macro(spaceselect $selectspace $spaces $spacesText)
  <select name="space" title="$msg.get('xe.search.bar.spaces.title')">
    #spaceoption("All spaces" $selectspace $spacesText)
    #foreach($space in $spaces)
      #spaceoption($space $selectspace $spacesText)
    #end
  </select>
#end

  <form action="" id="searchBar">
<input type="text" name="text" class="searchQuery" value="$msg.get("xe.search.bar.query")" title="$msg.get('xe.search.bar.query.title')"/>
#spaceselect($space $spaces $spacesText)
<input type="submit" class="searchButton" value="$msg.get('xe.search.bar.go')" title="$msg.get('xe.search.bar.go.title')"/>
<div class="searchHelp">$msg.get("xe.search.bar.help")</div>
  </form>

Dependencies

Icons

search.png search.png

Translations

xe.search.bar.query=search ...
xe.search.bar.query.title=Enter your search query
xe.search.bar.wikis=All wikis
xe.search.bar.wikis.title=Select wiki
xe.search.bar.spaces=All spaces
xe.search.bar.spaces.title=Select spaces
xe.search.bar.go=Search
xe.search.bar.go.title=Search query
xe.search.bar.help=eq. xwiki* AND "search query"
xe.search.bar.advanced=Advanced 
Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected