Site Utilities
Site Search 
- Class name: (k-search)
- Version: 1.1
-
jQuery Interactive feature
-
Tapestry Integration
Use this component for the sitewide search engine only. Autocomplete is possible through the "k-autocomplete" class, given to the search input field.
Please notice that this component uses the placeholder
attribute and the "search" input type, valid only for the HTML5 DOCTYPE. If your site uses the XHTML DOCTYPE, replace those values for valid ones: use title
instead of placeholder
, and replace the "search" type with the "text" type.
HTML5 Plain Code
-
<form class="k-search" method="post" action="">
-
<p><input type="search" class="k-autocomplete" id="search-tag" name="search-tag" placeholder="Search..." title="Search" role="search" />
-
<input type="submit" value="go" /></p>
-
</form>
CSS Code
-
form.k-search {float: left; width: 20%;}
-
form.k-search p {margin-top: 1.5em;}
-
#search-tag {width: 70%; font-size: 80%;}
-
form.k-search input[type=submit] {font-size: 80%; padding: 0.2em;}
-
.ui-autocomplete {
-
position: absolute;
-
color: #555;
-
background: #FFF;
-
padding: 0;
-
border: 1px solid #BFBFBF;
-
cursor: default;
-
}
-
.ui-autocomplete li {
-
list-style-type: none;
-
padding: 0;
-
}
-
.ui-autocomplete a, .ui-autocomplete a:link, .ui-autocomplete a:visited {
-
display: block;
-
padding: 2px 8px;
-
}
-
.ui-autocomplete a:hover {color: #FFF; background: #66A3C7;}
-
form.k-search .ui-state-hover, form.k-search .ui-state-focus {
-
color: #FFF;
-
background: #66A3C7;
-
}
How to apply
-
(function($){
-
'use strict';
-
function createAutoComplete(theInput, theSource) {
-
var availableTags = theSource;
-
$(theInput).autocomplete({
-
source: function(request, response){
-
var ajaxRequest = {
-
url: availableTags,
-
success: function(data){
-
response(eval(data));
-
},
-
type: 'POST'
-
};
-
$.ajax(ajaxRequest);
-
}
-
});
-
}
-
function supports_input_placeholder() {
-
var i = document.createElement('input');
-
return 'placeholder' in i;
-
}
-
/* Tests if browser supports placeholder attr... */
-
$(document).ready(function(){
-
if (supports_input_placeholder()) {
-
if ($.ui && $.ui.autocomplete) {
-
var inputAutocomplete = $('input.k-autocomplete');
-
inputAutocomplete.attr('placeholder', 'Search...');
-
createAutoComplete('.k-autocomplete', './autocomplete_tags.txt');
-
inputAutocomplete.focus(function() {
-
if($(this).val() === $(this).attr('placeholder')) {
-
$(this).val('');
-
}
-
}).blur(function() {
-
if($(this).val() === '') {
-
$(this).val($(this).attr('placeholder'));
-
}
-
}).val($(this).attr('placeholde'));
-
}
-
} else {
-
jQuery('input.k-autocomplete').attr('value', 'Search...');
-
}
-
});
-
})(jQuery);
Autocomplete can be customized to work with various data sources, by just specifying the source option. You must replace the variable given to the createAutoComplete function by your own data file path (relative to the HTML page).
For more information about this plug-in, its options, events and methods, see the jQuery Autocomplete page.
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:
Tapestry Integration
This input will add a form with a Text input, using the autocomplete mechanism. This complex component has the same functionnalities as the Tapestry components : Form (Submission process), TextField, Submit and the AutoComplete mixin.
You will have access to some parameters of these 4 components. Please have a look to the Tapestry Documentation.
- Form : autofocus, clientValidation, zone
- TextField : validate, value
- Submit : event, image, mode
- AutoComplete : minChars, frequency, tokens
Name | Required | Java Type | Default Prefix | Default Value | Description |
---|---|---|---|---|---|
placeholder | false | String | literal | The PlaceHolder attribute for the Input. |
The Template
-
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
-
xmlns:p="tapestry:parameter">
-
-
<div t:type="kawwa2/SiteSearch" t:id="search"
-
t:value="search" t:minChars="3"
-
t:placeholder="Search..." t:autofocus="false"/>
-
</html>
Java Implementation
-
package net.atos.kawwaportal.components.test.pages;
-
import java.util.ArrayList;
-
import java.util.List;
-
import org.apache.tapestry5.EventConstants;
-
import org.apache.tapestry5.annotations.OnEvent;
-
import org.apache.tapestry5.annotations.Property;
-
public class SiteSearch {
-
-
@Property
-
private String search;
-
-
@OnEvent(EventConstants.PROVIDE_COMPLETIONS)
-
public List<String> getResults(String input){
-
-
List<String> results = new ArrayList<String>();
-
if(input.startsWith("a")){
-
results.add("abcd");
-
results.add("abcd1");
-
results.add("abcd2");
-
}
-
return results;
-
}
-
-
@OnEvent(value=EventConstants.SUBMIT, component="search")
-
public void submit(){
-
-
}
-
}