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 7 kB). Knižnica je určená pre moderné prehliadače (napr. v staršom Internet Exploreri 11 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'].

// vstupné pole
<input id="suggester1" type="text" placeholder="Vyhľadať .." maxlength="20" />

// kontajner pre zobrazenie napr. chybovej správy
<div id="messsage"></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 = "#messsage"
	extraParams = '{"is_active":"any"}'
	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 nastavenie polí s údajmi subjektu
	'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('messsage').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('messsage').innerHTML =
				"<div class='alert alert-danger my-2'>"
				+"<i class='fa fa-warning'></i> "+error+"</div>";
		}
	}
};

Pre zložitejšiu konfiguráciu umožňuje Vanilla JS autocomplete preposlanie konfiguračného objektu s vlastnými metódami, ktorý prepošleme namiesto funkcie pre spracovanie odpovede. Tento prístup je zložitejší ako v Príklade #1, avšak poskytuje viac možností pre formátovanie vrátenej odpovede. Pre detailný popis nastavení pozrite Konfiguráciu

// vstupné pole - bude obsahovať plnú adresu
<input id="suggester2" type="text" placeholder="Vyhľadať .." maxlength="20" />
// 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"
	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('messsage').innerHTML="<div>"+self.errorMsg+"</div>";
				} else if (!data.results.length) {
					// no matching items - inject default empty item
					const 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 multiple configs into global object
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.

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