[ KAWWA PORTAL ] Components : Site Search

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.

Demo
Snippets
Tapestry Integration

HTML5 Plain Code

COPY

<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

COPY

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

COPY

```
(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

SiteSearch parameters
Name	Required	Java Type	Default Prefix	Default Value	Description
placeholder	false	String	literal		The PlaceHolder attribute for the Input.

The Template

COPY

<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

COPY

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(){
```
```
		
```
```
	}
```
```
}
```

Top

KAWWA Markup Pattern Library

Site Utilities

Site Search

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce