Súbory
js/js_smartSearch.js
css/jsSmartSearch/ssearch.css
include/jsSmartSearch/jsSmartSearch.class.php
images/ss/

V adresári images sú obrázky vo formáte png optimálne 256*256 veľkosť s transparetným pozadím, určené pre

Nutné ďalšie súbory sú jquery, jquery.ui.js a komunikačná trieda pre komunikáciu s php js_comunication.js

Inicializácia smartSearchu v html stránke

<div id="main_ss_cont">
	<span class="ui-helper-hidden-accessible" role="status" aria-live="polite"></span>
	<img class="ss_info" id="categoryIcon" onclick="jsSmartSearch.ss.showCategories('smartSearchSelect');">
   	<input id="hint" class="ui-autocomplete-input" type="text" name="word" autocomplete="off">
   	<div class="selectedCategoryLabel"></div>
 
   	<img src="images/ss/delete.png" class="ss_delete" onclick="jsSmartSearch.ss.close('ss_container','hint');">
 
 	<div id="ss_categoryContainer">
    	<input type="hidden" id="selectedCategory" value="">
    	<div class="categoryList"></div>
    </div>
   	<div id="ss_container">
   		<div class="smart_search_lite"></div>
   		<div id="loader"><img src="images/ss/ssloader.gif" class="ajaxLoader"></div>
    </div>
</div>

Následne je nutné v javascriptovom súbore inicializovať jsSmartSearch funkcionalitu
Ako prvé pre správne fungovanie html tooltipu je inicializácia nového attribútu data-tooltip Toto je dôležité preto, lebo klasický tooltip dokáže zobrazovať len čistý text a aby sme mohli použiť html v tooltipe je toto nutné.

$( document ).tooltip({
		items:"[data-tooltip]",
		content:function(){
			return $(this).attr("data-tooltip");
		}
	});
 
$(document).ready(function(){
	init();
});

V prípade, že používame kategórie pre spresnenie smartSearchu, je nutné ako prvé nainicialzovať výber kategórie. Ak máme viacero smartSearchov na jednej stránke je nutné

jsSmartSearch.helper._categorySelectionData = {
			ss_info:"ss_info",
			ss_categoryContainer:"ss_categoryContainer",
			selectedCategory:"selectedCategory",
			categoryList:"categoryList",
			ss_categoryListResult:"ss_categoryListResult",
			selectedCategoryLabel:"selectedCategoryLabel",
			smartSearchSelect:"smartSearchSelect",
			ss_container:"ss_container",
			image_url:"images/ss/",
			server_url:"http://studio2.local/",
			categoryIconId:"categoryIcon",
			symbol:"category.png"
	}

• ss_info (css class) = je ikona pred smartSearchom na výber kategórie
• ss_categoryContainer (css id) = je zakladný kontainer kde sa budú zobrazovať dané kategórie
• selectedCategory (css id, type hidden) = nastavenie vybranej kategórie
• categoryList (css class) = je div kde sa už načítajú dané kategórie…
• ss_categoryListResult = je dynamicky vytvorený div, v ktorom sa zobrazujú jednotlivé klikateľné kategórie
• selectedCategoryLabel = obsahuje textovú informáciu o aktuálne vybranej kategórii
• smartSearchSelect je idečko selectu v prípade ak máme zoznam smartSearchov
• ss_container je názov id ečka hlavného smartSearch kontainera
• image_url je cesta k obrázkom pre smartSearch
• server_url je url servera na ktorom beží omega
• symbol je názov obrázka pre danú kategóri