API Integrácia - Vanilla JS autocomplete loader

Pre integráciu bez závislosti na externých javascript knižniciach možno využiť knižnicu Vanilla JS autocomplete. Je to upravený variant voľne dostupnej javascript knižnice autoComplete bez externých závislostí a optimizovaný pre rýchle načítanie (zipped 8 kB). Knižnica je určená pre moderné prehliadače (napr. v staršom Internet Exploreri  fungovať nebude).

Podobne ako príklad jQuery UI autoComplete, aj v tomto príklade načítame a zobrazíme zoznam nájdených firiem. Konfiguráciu pre uvedenú knižnicu je potrebné nastaviť do globálneho objektu window['_bizdata_config'].

• Príklad #1 - jednoduchý - vyhľadanie firmy/subjektu
• Príklad #2 - pokročilý - vyhľadanie firmy/subjektu
• Príklad #3 - vyhľadanie firmy/subjektu podľa adresy
• Príklad #4 - výber štatutára podľa firmy/subjektu
• Príklad #5 - vyhľadanie štatutára vo všetkých subjektoch

Pokiaľ využívate jQuery alebo je integrácia prostredníctvom vanilla JS príliš zložitá, pozrite príklady pre jQueryUI autocomplete.

V tomto príklade nastavujeme jedinú povinnú metódu pre spracovanie odpovede. Táto je priradená input elementu pre zadanie názvu firmy a môže byť definovaná buď ako parameter selection, alebo anonymná funkcia.

Obr. 1 - Vzor výstupu - vyhľadanie firmy podľa názvu, IČO, DIČ

// vstupné pole
<input id="suggester1" type="text" placeholder=" Názov firmy, IČO .." maxlength="20" />

// kontajner pre zobrazenie napr. chybovej správy
<div id="messsage1"></div>

// načítame vanilla script, prístupový kľúč "xauth" vložíme ako atribút
<script defer
	src="https://bizdata.sk/js/dist/bizdata-loader-latest.min.js"
	xauth = "my-secret-key"
	messageContainer = "#messsage1"
	maxResults = "5">
</script>

// globálny konfiguračný objekt - musí byť vytvorený pred načítaním knižnice
window['_bizdata_config'] = {
	// názov ID elementu => funkcia pre spracovanie odpovede
	'suggester1' : function (event) {
		// "event" obsahuje zvolenú firmu/subjekt s JSON údajmi
		try{
			// nastavíme zvolenú hodnotu do input poľa - názov firmy bez HTML tagov
			var selectedName = event.detail.selection.match.replace(/<\/?[^>]+(>|$)/g, "");
			document.getElementById('suggester1').value = selectedName;
			// parsujeme JSON string na JSON objekt ..
			var json = JSON.parse(event.detail.selection.value.value);
			// .. a nastavime údaje
			document.getElementById('messsage1').innerHTML = "<br><u>Vybratý subjekt:</u><br>"
				+ "<b>" + json.obchodne_meno + "</b>"
				+ "<br>" + json.addr_street_nr +", "+ json.addr_city +" "+ json.addr_zip
				+ "<br>IČO: " + json.ico
				+ "<br>Subjekt aktívny: " + (json.is_active ? 'Áno' : 'Nie');
			} catch (error) {
				// zobrazíme prípadnú chybu
				document.getElementById('messsage1').innerHTML =
					"<div class='alert alert-danger my-2'>"
					+"<i class='fa fa-warning'></i> "+error+"</div>";
		}
	}
};

Zložitejšia konfigurácia umožňuje Vanilla JS autocomplete nastavenie niekoľkých metód a parametrov v globálnom konfiguračnom objekte. Tieto umožňujú napr. vlastné formátovanie zoznamu, odoslanie dynamických parametrov alebo nastavenie potrebnej API metódy. Pozrite detailný popis konfiguračných parametrov .

Obr. 2 - Vzor výstupu - vyhľadanie firmy podľa názvu, IČO, DIČ

// vstupné pole - bude obsahovať plnú adresu
<input id="suggester2" type="text" placeholder="Vyhľadať .." maxlength="20" />

// kontajner pre zobrazenie napr. chybovej správy
<div id="messsage2"></div>

// načítame bizdata vanilla script, prístupový kľúč "xauth" vložíme ako atribút
<script defer
	src="https://bizdata.sk/js/dist/bizdata-loader-latest.min.js"
	xauth="my-secret-key"
	messageContainer = "#messsage2"
	extraParams = '{"is_active":"any","lang":"en"}'
	customCss=".no_result{color:red !important;} .autoComplete_wrapper>ul>li mark{color:blue;}"
	maxResults = "5">
</script>

// globálny konfiguračný objekt - musí byť vytvorený pred načítaním knižnice
var config = {
	// formát: [názov ID elementu => konfiguračný objekt]
	'suggester2' : {
		// konfiguračný objekt - napr. lokalizujeme správu, ak neboli nájdené žiadne záznamy
		// https://tarekraafat.github.io/autoComplete.js/#/configuration?id=example-11
		resultsList: {
			element: (list, data) => {
				if (self.errorMsg) {
					// handle error
					document.getElementById('messsage2').innerHTML="<div>"+self.errorMsg+"</div>";
				} else if (!data.results.length) {
					// no matching items - inject default empty item
					let message = document.createElement("div");
					message.setAttribute("class", "no_result");
					message.innerHTML = "<span>Oups, skúste znovu ..</span>";
					list.appendChild(message);
				}
			}
		},
		selection: function(event) {
			// parse JSON data and render on page
			var json = JSON.parse(event.detail.selection.value.value);
			event.target.value = json.obchodne_meno+", "+json.addr_street_nr
								+", "+json.addr_city+" "+json.addr_zip;
		}
	}
};

// merge configs into global object for multiple instances, if defined in local variable
window['_bizdata_config'] = window['_bizdata_config'] || {};
window['_bizdata_config'] = {...window['_bizdata_config'], ...config};

Vyhľadanie firmy je tiež možné podľa adresy odoslaním špeciálneho poľa full_address, ktoré definujeme v konfiguračnom parametri extraParams. Musí obsahovať reťazec s uvedením ulice (môže obsahovať aj popisné číslo), obce a PSČ. Tieto tri časti adresy musia byť oddelené čiarkou a môžu byť uvedené v ľubovoľnom poradí - napr. Strážovská 1201, Bánovce alebo Bratislava, 85102. Nie je nutné uvádzať všetky tri časti adresy, postačí uvedenie aspoň jednej časti.

Obr. 3 - Vzor výstupu - vyhľadanie firmy podľa adresy

// vstupné pole
<input id="suggester3" type="text" placeholder=" Ulica, obec, PSČ .." maxlength="40" />

// kontajner pre zobrazenie napr. chybovej správy
<div id="messsage3"></div>

// načítame vanilla script, prístupový kľúč "xauth" vložíme ako atribút
<script defer
	src="https://bizdata.sk/js/dist/bizdata-loader-latest.min.js"
	xauth = "my-secret-key"
	messageContainer = "#messsage3"
	maxResults = "5">
</script>

var config = {
	'suggester3' : {
		// set dynamically extraParams
		extraParams: function () {
			return {
				// and set the value into dedicated address field
				full_address: document.getElementById('suggester3').value
			};
		},
		// customize dropdown options - display also the address
		resultItem: {
			element: function(item, data){
				let json = JSON.parse(data.value.value);
				item.innerHTML =
				"<div class='biz-item-wrapper'>"
					+ data.match
					+ " ("+json.addr_street_nr +", "+ json.addr_zip +" "+ json.addr_city+")"
				+"</div>";
			}
		},
		// required - define handler to process returned data
		selection: function(event) {
			// parse JSON data and render on page
			var json = JSON.parse(event.detail.selection.value.value);
			//event.target.value = json.obchodne_meno;
			document.getElementById('messsage3').innerHTML = "<br><u>Vybratý subjekt:</u><br>"
			 + "<b>" + json.obchodne_meno + "</b>"
			 + "<br><b>" + json.addr_street_nr +", "+ json.addr_city +" "+ json.addr_zip +"</b>"
			 + "<br>IČO: " + json.ico
			 + "<br>Subjekt aktívny: " + (json.is_active ? 'Áno' : 'Nie');
		}
	}
};

// merge configs into global object, if defined as local variables
window['_bizdata_config'] = window['_bizdata_config'] || {};
window['_bizdata_config'] = {...window['_bizdata_config'], ...config};

Nasledujúci príklad umožňuje nastaviť ako adresáta zvoleného štatutára spoločnosti. Pre vyhľadanie je potrebné nastaviť API metódu search-person-by-company v parametri urlService a prípadne upraviť labels v generovanom zozname.

Obr. 4 - Vzor výstupu - vloženie adresy štatutára

// vstupné pole
<input id="suggester4" type="text" placeholder=" Názov firmy, IČO .." maxlength="20" />

// kontajner pre zobrazenie napr. chybovej správy
<div id="messsage4"></div>

// načítame vanilla script, prístupový kľúč "xauth" vložíme ako atribút
<script defer
	src="https://bizdata.sk/js/dist/bizdata-loader-latest.min.js"
	xauth = "my-secret-key"
	messageContainer = "#messsage4"
	maxResults = "5">
</script>

var config = {
	'suggester4' : {
		// set dedicated API method
		urlService: "search-person-by-company",
		// customize dropdown labels - show ICO, do not duplicate SZČO
		resultItem: {
			element: function(item, data){
				let person = JSON.parse(data.value.value),
					company = person.company,
					role = person.role_title.toLowerCase();

				item.innerHTML = "<div class='biz-item-wrapper'>"
					+ data.match
					+ " (" + ( company.obchodne_meno == person.person_name ?
						  role + ", IČO "+company.ico
						: role +", "+ company.obchodne_meno +", IČO "+company.ico
					) + ")"
				+"</div>";
			}
		},
		// required handler to process returned data
		selection: function(event) {
			// parse JSON data and render the address
			let person = JSON.parse(event.detail.selection.value.value),
				company = person.company;

			// show some pretty HTML ..
			document.getElementById('messsage4').innerHTML =
				  "<div class='jumbotron p-2 my-2'>"
				+ "Adresované na:"
				+ "<br><b>"+ person.person_name +"</b>"
				+ "<hr class='my-1 col-8'>"
				+ (company.obchodne_meno == person.person_name ?
					'' : "<b>"+ company.obchodne_meno +"</b><br>")
				+ company.addr_street_nr
				+ "<br>"+ company.addr_zip +" "+ company.addr_city
				+ "</div>"
		}
	}
};

// merge configs into global object, if defined as local variable for multiple instances
window['_bizdata_config'] = window['_bizdata_config'] || {};
window['_bizdata_config'] = {...window['_bizdata_config'], ...config};

V prípade, ak potrebujete vyhľadať osobu vo firme, ktorej názov nepoznáte, môžete využiť metódu search-person. Táto vráti zoznam všetkých nájdených osôb (tzn. štatutárov, konateľov, akcionárov apod.) vo všetkých subjektoch.

Obr. 5 - Vzor výstupu - vyhľadanie štatutára vo všetkých subjektoch

// vstupné pole
<input id="suggester5" type="text" placeholder=" Priezvisko a meno osoby .." maxlength="20" />

// kontajner pre zobrazenie napr. chybovej správy
<div id="messsage5"></div>

// načítame vanilla script, prístupový kľúč "xauth" vložíme ako atribút
<script defer
	src="https://bizdata.sk/js/dist/bizdata-loader-latest.min.js"
	xauth = "my-secret-key"
	messageContainer = "#messsage5"
	maxResults = "5">
</script>

var config = {
	'suggester5' : {
		// set dedicated API method
		urlService: "search-person",
		// customize dropdown labels - show ICO, do not duplicate SZČO
		resultItem: {
			element: function(item, data){
				let person = JSON.parse(data.value.value),
					company = person.company,
					// zistime, ci meno osoby obsahuje skratku spoločnosti napr. "s.r.o."
					isJurist = /(\ba\. ?s\.|\bk\.s\.|\bs\. ?r\. ?o\.|\bspol\. ?s ?r\. ?o\.|\bv\. ?o\. ?s\.|\bs ?\.p\.|GmbH)/i.test(person.person_name);

				item.innerHTML = "<div class='biz-item-wrapper'>"
					+ data.match // ie. "John Doe"
					+ ( person.city ? " "+(isJurist ? "sídlom" : "bytom")+" " + person.city + ", " : "" )
					+ ( company.obchodne_meno == item.label ? ", IČO "+company.ico
					  : " vo firme "+company.obchodne_meno + ", IČO "+company.ico+", "+company.addr_city )
				+"</div>";
			}
		},
		// required handler to process returned data
		selection: function(event) {
			// parse JSON data and render the address
			let person = JSON.parse(event.detail.selection.value.value),
				company = person.company;
			// show some pretty HTML ..
			document.getElementById('messsage5').innerHTML =
				"<div class='jumbotron p-2 my-2'>"
				+ "Adresované na:"
				+ "<br><b>"+ person.person_name +"</b>"
				+ "<hr class='my-1 col-8'>"
				+ (company.obchodne_meno == person.person_name ? '' : "<b>"+ company.obchodne_meno +"</b><br>")
				+ company.addr_street_nr
				+ "<br>"+ company.addr_zip +" "+ company.addr_city
				+ "</div>"
		}
	}
};

// merge configs into global object, if defined as local variables
window['_bizdata_config'] = window['_bizdata_config'] || {};
window['_bizdata_config'] = {...window['_bizdata_config'], ...config};

Nasledujúce konfiguračné parametre možno vložiť ako atribúty priamo do HTML tagu pre načítanie externého scriptu.

extraParams: function () {
	return {
		user_name: document.getElementById('user_name').value
	};
},

<div class='item-wrapper'>
	<div class='item-left'>{match}</div>
	<div class='item-right'>{dic}{ico}</div>
</div>