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 smartSearch

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">
   	<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" id="ss_delete_btn">
 
 	<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) = uloženie aktuálne vybranej kategórie do typu hidden
• 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ý výber kategórie (musí byť uložený v images/ss)

Jednotlivé položky kategórie je nutné uviesť v základnej triede js_smartSearch.js a to v Namespace jsSmartSearch a triede helper, vytvorením metódy, ktorá vracia požadované pole

jsSmartSearch.helper = {
_mainStructure:function(){
 
			return [
			        {type:"category_group", s_id:"project",title:"Projekty",symbol:"project.png"},
			        {type:"category_group", s_id:"project_active",title:"Aktívne projekty",symbol:"active_project.png"},
			        {type:"category_group", s_id:"technology",title:"Technologie",symbol:"technology.png"},
			        {type:"category_group", s_id:"resource",title:"Zdroje",symbol:"resource.png"},
			        {type:"category_group", s_id:"resource_technology",title:"Zdrojová tehnológia",symbol:"tech_res.png"},
			        {type:"category_group", s_id:"goods",title:"Tovar",symbol:"goods.png"},
			        {type:"category_group", s_id:"folder",title:"Adresár",symbol:"folder.png"},
			        {type:"category_group", s_id:"location",title:"Lokácia",symbol:"location.png"},
			        ];
		},
 
}

Symbol je názov png, ktorý musí byť uložený v adresári s obrázkami pre smartSearch. Nutné je dodržanie štruktúru objektového poľa a to type, s_id, title, symbol. Následne je nutné rozšíriť funkcie showCategories a setCategories a daný smartSearch a tým sa zobrazia pri výbere.

function ss_medicClService(id,text){
	var data = {
 
			divClassSmartSearch:"smart_search_lite",
			divIdForResult: "rr_res", //toto je riadok kam sa budu ukladat uz sparsovane vysledky
			divClassForResult: "smart_search_lite_result", //toto je class pripojenia na div id vysledku
			onSelectCallBack:"getData", //toto je kam sa zavola uz vysledok
			ssContainer:"ss_container", //meno kontainer celeho smartSearchu
			hintName:"hint",
			loadIcon:"loader",
 
			searchType:"all",
			fMethod:"default",
			extraSettings:[],
			partiallyOffset:0,
			partiallyLimit:52,
			partiallyPass:1,
			topHitsIdf:"",
			topHitsMaxCount:5,
			dynSettings:{
					methodSettings:{
							labelCut:{
									labelFillStr:"...",
									labelCutEnd:10,
									labelCutStart:100
									},
							languageId:"sk",
							all:1,
							mode:"dynamic",
							broadCastIdf:"medic/medicClService",
							file:"module:medic/smartSearch/sMedicClService"
								}
						}
 
		}
 
		switch (id){
		case "click":
			data.searchTerms="*";
			break;
		case "type":
			data.searchTerms = text;
			break;
		}
 
		jsSmartSearch.ss.search(
				__ss_url__+"testssearch",
				"jsSmartSearch/jsSmartSearch/sMedicClService",
				these,
				data
				);
}

Prvá časť je nutná na to aby sa naformátovala časť pre zobrazenie výsledkov,

• divIdForResult je názov kam sa budú liať dynamicky generované výsledky
• divClassForResult je kontainer do ktorého sa dáva divIdForResult
• hintName je hint id pre zobrazenie hintov
• ssContainer je hlavný kontainer smartSearchu
• loadIcon je ikonka animácie loadovania dát
• onSelectCallBack je názov funkcie kam sa má výsledok po výberu výsledku vyhľadávania vrátiť

divClassSmartSearch:"smart_search_lite",
divIdForResult: "rr_res", //toto je riadok kam sa budu ukladat uz sparsovane vysledky
divClassForResult: "smart_search_lite_result", //toto je class pripojenia na div id vysledku
onSelectCallBack:"getData", //toto je kam sa zavola uz vysledok
ssContainer:"ss_container", //meno kontainer celeho smartSearchu
hintName:"hint",
loadIcon:"loader",

Druhá časť je už tá, v ktorej sa nastavuje už objekt odosielaný do smartSearch-u, tento je špecifický pre každý smartSearch, ale v základe

• searchType je spôsob hľadania
• fMethod default/begin znamená či sa bude hľadať v častaich slov alebo len odzačiatku(rýchlejšia)
• partiallyOffset a partiallyLimit je pravidlo LIMIT offset,Limit v MySQL
• dynSettings je object kam sa zadávajú nastavenia LabelCut a to start a end, dľa nastavenia smartSearchu

Dôležite je rozdelenie na click a type, t.j. keď sa prvý raz klikne do input boxu začnú sa hľadať všetky nálezy, písaním už prebieha aktívne vyhľadávanie…

Potom už stačí zavolať funkciu

jsSmartSearch.ss.search(
			__ss_url__+"testssearch",
			"jsSmartSearch/jsSmartSearch/smartSearchDiagnosis",
			these,
			data
			);

ss_url je adresa servera a route-u pre daný modul a reťazec už názov cesty