YaCy '#[clientname]#': Integration of a Search Field for Live Search

#%env/templates/metas.template%# #%env/templates/header.template%# #%env/templates/submenuPortalIntegration.template%#

Integration of a Search Field for Live Search

A 'Live-Search' input field that reacts as search-as-you-type in a pop-up window can easily be integrated in any web page. This is the same function as can be seen on all pages of the YaCy online-interface (look at the window in the upper right corner). Just use the code snippet below to integrate that in your own web pages. Please check if the address, as given in the example '#[ip]#:#[port]#' here is correct and replace it with more appropriate values if necessary.

Code Snippet:

<script src="http://#[ip]#:#[port]#/yacy/ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script>			
	$(document).ready(function() {
		yconf = {
			url    : 'http://#[ip]#:#[port]#',
			logo   : '/yacy/ui/img/yacy-logo.png',
			link   : 'http://www.yacy.net',
			global : false,
			width  : 500,
			height : 620,
			position : ['top',30],
			theme  : 'start',
			title  : 'YaCy Portal Search'
		};
		$.getScript(yconf.url+'/yacy/ui/js/yacyui-portalsearch.js', function(){});
	});
</script>
<div id="yacylivesearch">
	<form id="ysearch" method="get" accept-charset="UTF-8" action="http://#[ip]#:#[port]#/yacysearch.html">
		Live Search <input name="query" id="yquery" class="fancy" type="text" size="15" maxlength="80" value=""/>
		<input type="hidden" name="verify" value="true" />
		<input type="hidden" name="maximumRecords" value="20" />
		<input type="hidden" name="resource" value="local" />
		<input type="hidden" name="urlmaskfilter" value=".*" />
		<input type="hidden" name="prefermaskfilter" value="" />
		<input type="hidden" name="display" value="2" />
		<input type="hidden" name="nav" value="all" />
		<input type="submit" name="Enter" value="Search" />
	</form>
</div>

Configuration options and defaults for 'yconf':

Defaults

Size and position (width | height | position)

Specifies where the dialog should be displayed. Possible values for position: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner).

Animation effects (show | hide)

The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

Interaction (modal | resizable)

If modal is set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.

If resizable is set to true, the dialog will be resizeable.

Load JavaScript load_js (true | false)

If load_js is set to false, you have to manually load the needed JavaScript on your portal page. This can help to avoid timing problems or double loading.

<script src="/yacy/ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>    
<script src="/yacy/ui/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<script src="/yacy/ui/js/jquery.dimensions.min.js"></script>
<script src="/yacy/ui/js/jquery.query.js"></script>
<script src="/yacy/ui/js/jquery.form.js"></script>
<script src="/yacy/ui/js/jquery.field.min.js"></script>

Load Stylesheets load_css (true | false)

If load_css is set to false, you have to manually load the needed CSS on your portal page. This can help to avoid timing problems or double loading.

<link media="screen" type="text/css" href="/yacy/ui/css/themes/start/ui.base.css" rel="stylesheet" />	
<link media="screen" type="text/css" href="/yacy/ui/css/themes/start/ui.theme.css" rel="stylesheet" />
<link media="screen" type="text/css" href="/yacy/ui/css/yacyui-portalsearch.css" rel="stylesheet" />

Themes
You can 
download ready made themes or create 
your own custom theme. 
Themes are installed into: DATA/HTDOCS/yacy/ui/css/themes/			
	
    #%env/templates/footer.template%#