====== Javascript verzia smartSearch-u z flash-u ======
**GIT vetva je 727.git duch/merge7 / 3514b1a**
V tejto vetve sa nachádza aj ukážkový modul testss, v ktorom je kompletné funkčné demo SmartSearchu
**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 =====
===== 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é.
$( document ).tooltip({
items:"[data-tooltip]",
content:function(){
return $(this).attr("data-tooltip");
}
});
$(document).ready(function(){
init();
});
===== Nastavenie tlačidiel smartSearchu =====
Do inicailizačnej funkcie je nutné nastaviť ešte stav jednotlivých tlačidiel, t.j.
$("#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
});
===== 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é
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.
===== Vytvorenie smartSearch požiadavky =====
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
