#%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
url
is a mandatory property - no default
global
false
theme
'start'
title
'YaCy P2P Web Search'
logo
'/yacy/ui/img/yacy-logo.png'
link
'http://www.yacy.net'
width
420
height
500
position
['top',50]
modal
false
resizable
true
show
''
hide
''
load_js
true
load_css
true
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%#