Rozdiely

Tu môžete vidieť rozdiely medzi vybranou verziou a aktuálnou verziou danej stránky.

--- dev:omega:js:smartsearch [2017/01/03 14:10]
Boris Duchaj
+++ dev:omega:js:smartsearch [2017/01/09 11:13] (aktuálne)
Boris Duchaj [Vytvorenie kategorií smartSearchu]
@@ Riadok 1: / Riadok 1: @@
 ====== Javascript verzia smartSearch-u z flash-u ======
+**<color green>GIT vetva je 727.git duch/merge7 / 3514b1a</color>**
+<color green>V tejto vetve sa nachádza aj ukážkový modul testss, v ktorom je kompletné funkčné demo SmartSearchu</color>
 **Súbory** \\
@@ Riadok 7: / Riadok 11: @@
 //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
+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
+===== Inicializácia smartSearchu v html stránke =====
 <code html5>
 <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');">
+	<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" onclick="jsSmartSearch.ss.close('ss_container','hint');">
+   	<img src="images/ss/delete.png" class="ss_delete" id="ss_delete_btn">
  	<div id="ss_categoryContainer">
@@ Riadok 32: / Riadok 37: @@
 </div>
 </code>
+===== Inicializácia data-tooltip =====
 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é.
@@ Riadok 49: / Riadok 56: @@
 </code>
-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é
+===== Nastavenie tlačidiel smartSearchu =====
+Do inicailizačnej funkcie je nutné nastaviť ešte stav jednotlivých tlačidiel, t.j.
+<code javascript>
+$("#categoryIcon").on("click",function(){
+		jsSmartSearch.ss.showCategories('smartSearchSelect'); // odkaz na select kde su smartsearche
+	});
+	$("#ss_delete_btn").on("click",function(){
+		jsSmartSearch.ss.close('ss_container','hint'); //odkaz na ss_container a textove pole hint
+	});
+	$("#smartSearchSelect").on("change",function(){
+		jsSmartSearch.ss.close('ss_container','hint'); // pri zmene zavolaj reset smartsearchu
+		jsSmartSearch.ss.setCategories('smartSearchSelect'); //nastav kategoriu ak je to mozne
+	});
+</code>
+===== Vytvorenie kategorií smartSearchu =====
+V prípade, že používame  pre spresnenie smartSearchu kategórie, je nutné ako prvé nainicializovať výber kategórie. Ak máme viacero smartSearchov na jednej stránke je nutné
 <code javascript>
 jsSmartSearch.helper._categorySelectionData = {
@@ Riadok 98: / Riadok 125: @@
 }
 </code>
-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.
+**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.
-===== Vytvorenie smartSearch poziadavky =====
+===== Vytvorenie smartSearch požiadavky =====
+<code javascript>
+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
+				);
+}
+</code>
+**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ť
+<code javascript>
+                        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",
+</code>
+**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
+<code javascript>
+jsSmartSearch.ss.search(
+			__ss_url__+"testssearch",
+			"jsSmartSearch/jsSmartSearch/smartSearchDiagnosis",
+			these,
+			data
+			);
+</code>
+__ss_url__ je adresa servera a route-u pre daný modul a reťazec už názov cesty

SystemOmega

Nástroje používateľa

Nástoje správy stránok

Rozdiely

Nástoje stránky