KAWWA Markup Pattern Library


Site Utilities

Site Search Component Information

  • Class name: (k-search)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

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

COPY
  1. <form class="k-search" method="post" action="">
  2. 	<p><input type="search" class="k-autocomplete" id="search-tag" name="search-tag" placeholder="Search..." title="Search" role="search" /> 
  3. 		<input type="submit" value="go" /></p>
  4. </form>

CSS Code

COPY
  1. form.k-search {float: left; width: 20%;}
  2. 
                                
  3. 	form.k-search p {margin-top: 1.5em;}
  4. 	#search-tag {width: 70%; font-size: 80%;}
  5. 	form.k-search input[type=submit] {font-size: 80%; padding: 0.2em;}
  6. 
                                
  7. .ui-autocomplete {
  8.     position: absolute;
  9.     color: #555;
  10.     background: #FFF;
  11. 	padding: 0;
  12.     border: 1px solid #BFBFBF;
  13.     cursor: default;
  14. }
  15. 
                                
  16. 	.ui-autocomplete li {
  17. 	    list-style-type: none;
  18. 		padding: 0;
  19. 	}
  20. 
                                
  21. 	.ui-autocomplete a, .ui-autocomplete a:link, .ui-autocomplete a:visited {
  22. 	    display: block;
  23. 	    padding: 2px 8px;
  24. 	}
  25. 	.ui-autocomplete a:hover {color: #FFF; background: #66A3C7;}
  26. 	form.k-search .ui-state-hover, form.k-search .ui-state-focus {
  27. 	    color: #FFF;
  28. 	    background: #66A3C7;
  29. 	}
  30. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	function createAutoComplete(theInput, theSource) {
  5. 		var availableTags = theSource;
  6. 
                                
  7. 		$(theInput).autocomplete({
  8. 
                                
  9. 			source: function(request, response){
  10. 				var ajaxRequest = {
  11. 					url: availableTags,
  12. 					success: function(data){
  13. 						response(eval(data));
  14. 					},
  15. 					type: 'POST'
  16. 				};
  17. 				$.ajax(ajaxRequest);
  18. 			}
  19. 		});
  20. 	}
  21. 
                                
  22. 	function supports_input_placeholder() {
  23. 		var i = document.createElement('input');
  24. 		return 'placeholder' in i;
  25. 	}
  26. 
                                
  27. 	/* Tests if browser supports placeholder attr... */
  28. 	$(document).ready(function(){
  29. 		if (supports_input_placeholder()) {
  30. 			if ($.ui && $.ui.autocomplete) {
  31. 				var inputAutocomplete = $('input.k-autocomplete');
  32. 				inputAutocomplete.attr('placeholder', 'Search...');
  33. 				createAutoComplete('.k-autocomplete', './autocomplete_tags.txt');
  34. 				inputAutocomplete.focus(function() {
  35. 
                                
  36. 					if($(this).val() === $(this).attr('placeholder')) {
  37. 						$(this).val('');
  38. 					}
  39. 				}).blur(function() {
  40. 					if($(this).val() === '') {
  41. 						$(this).val($(this).attr('placeholder'));
  42. 					}
  43. 				}).val($(this).attr('placeholde'));
  44. 			}
  45. 		} else {
  46. 			jQuery('input.k-autocomplete').attr('value', 'Search...');
  47. 		}
  48. 	});
  49. })(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
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3. 
                                
  4. 		
  5. 	<div t:type="kawwa2/SiteSearch" t:id="search"
  6. 			t:value="search" t:minChars="3" 
  7. 			t:placeholder="Search..." t:autofocus="false"/>
  8. 
                                
  9. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. 
                                
  6. import org.apache.tapestry5.EventConstants;
  7. import org.apache.tapestry5.annotations.OnEvent;
  8. import org.apache.tapestry5.annotations.Property;
  9. 
                                
  10. public class SiteSearch {
  11. 	
  12. 	@Property
  13. 	private String search;
  14. 	
  15. 	@OnEvent(EventConstants.PROVIDE_COMPLETIONS)
  16. 	public List<String> getResults(String input){
  17. 		
  18. 		List<String> results = new ArrayList<String>();
  19. 		if(input.startsWith("a")){
  20. 			results.add("abcd");
  21. 			results.add("abcd1");
  22. 			results.add("abcd2");
  23. 		}
  24. 		return results;
  25. 	}
  26. 	
  27. 	@OnEvent(value=EventConstants.SUBMIT, component="search")
  28. 	public void submit(){
  29. 		
  30. 	}
  31. }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce