Príklad - jQuery UI | API Integrácia

Kľúčové slová

API integrácia

API Integrácia - jQuery UI autocomplete

Integrácia prostredníctvom jQuery UI widgetu autocomplete vyžaduje odoslanie autentifikačného API kľúča ako POST parameter xauth. API kľúč ku konkrétnej aplikácii / webu nájdete po prihlásení v Nastaveniach - časť API Integrácia.

Vrátený zoznam nájdených subjektov obsahuje zakódované dáta vo formáte JSON, ktoré po zvolení položky zo zoznamu dekódujeme a nastavíme do potrebných polí. Nie je potrebné zasielať ďalšiu API požiadavku pre načítanie detailov zvoleného subjektu. Pozrite popis podporovaných parametrov pre vyhľadávanie a popis parametrov autocomplete widgetu.

Príklad #1 - jednoduchý

Najjednoduchší variant, avšak aj najmenej flexibilný. Neumožňuje napr. ošetrenie chyby - pozrite príklad #2. Vrátená odpoveď obsahuje zakódovaný JSON reťazec s atribútmi subjektu a nevyžaduje odoslanie ďalšej API požiadavky.

HTML markup:

<!-- načítame externé knižnice do HTML <head> - jQuery, jQueryUI a CSS štýly -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" rel="stylesheet">

<!-- vložíme pole do HTML <body> pre zadanie hľadaného názvu subjektu -->
<input type="text" id="company-suggester1" placeholder="Vyhľadať .." class="form-control" />

JS script:

$("#company-suggester1").autocomplete({
	// nemá zmysel hľadať subjekty pre menej ako 3 písmená - výsledky sú irelevantné
	minLength: 3,

	source : function(request, response) {
		// CORS POST request
		$.post('https://bizdata.sk/api/v1/search-company', {
			term: request.term,
			dataType: "json",
			xauth: "my-secret-key",
			//is_active: 'any',
			option_size: 5
		}, function(response){
			if (!response.length) {
				alert("Žiadne záznamy.");
			}
			return response;
		});
	},

	// vypneme nastavenie "value" hodnoty, nakoľko by nastavilo nezmyselný JSON reťazec
	focus : function(event, ui){
		event.preventDefault();
	},

	// spracovanie zvolenej položky zo zoznamu
	select : function(event, ui){
		event.preventDefault(); // dont set the value (which is hash)
		$(this).val( ui.item.label ); // but set label - the company name
		try{
			// dekódujeme JSON reťazec - údaje subjektu
			data = $.parseJSON( ui.item.value );
			alert("Vybratý záznam:"
				+"\nNázov: " + data.obchodne_meno
				+"\nAdresa: "+ data.addr_street_nr +", "+ data.addr_zip +" "+ data.addr_city
				+(data.ico ? "\nIČO: " + data.ico : "")
				+(data.dic ? "\nDIČ: " + data.dic : "")
				+"\nVznik: " + data.date_vznik
				+"\nSubjekt aktívny: " + (data.is_active ? 'Áno' : 'Nie')
				+"\nTyp osoby: " + data.kod_typ_osoby
				+"\n ... "
			);
			// príp. nastavíme údaje subjektu do potrebných polí
			$("#company-name").val(data.obchodne_meno);
			$("#company-street-number").val(data.addr_street_nr);
			$("#company-zip-city").val(data.addr_zip +" "+ data.addr_city);
			$("#company-ico").val(data.ico ? data.ico : "-");
			// ... atď ...
		} catch (error) {
			alert("Neplatné JSON údaje .. \n"+error);
		}
	}
});

Príklad #2 - pokročilý

Pokročilejšia alternatíva - umožňuje napr. ošetrenie užívateľského vstupu, zobrazenie chyby, vloženie spinner loadera (koliesko) a zobrazenie IČO aj DIČ subjektu. Atribút value zvolenej položky obsahuje zakódovaný JSON reťazec s atribútmi subjektu a nevyžaduje odoslanie ďalšej API požiadavky.

HTML markup:

<!-- načítame externé knižnice do HTML <head> - jQuery, jQueryUI a CSS štýly -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" rel="stylesheet">

<!-- vložíme HTML kód do elementu <body> pre zadanie hľadaného názvu subjektu -->
<div class="my-3 offset-2 col-8" id="wrapper-suggester2">
	<input type="text" id="suggester2" class="form-control" placeholder="Vyhľadať ..">
	<div id="suggester2-message" class="py-2"></div>
</div>

CSS:

/* modify original jQuery CSS - remove border, set BG color .. */
#wrapper-suggester2 .ui-state-active,
#wrapper-suggester2 .ui-widget-content .ui-state-active
{
	border: 0;
	background-color: #ffa5006e;
	transition: background-color 100ms linear;
	margin: 0;
}

#wrapper-suggester2 .ui-widget.ui-widget-content
{
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* položka v zozname */
.item-wrapper {
	display: block;
	border-bottom: 1px solid orange;
	padding: 0;
	margin: 0;
	clear: both;
	overflow: hidden;
	font-size: 14px;
}

/* nazov subjektu */
.item-left {
	float: left;
	display: inline-block;
	width: 47%;
	padding: 5px;
	margin: 0;
	overflow: hidden;
}

/* IČO, DIČ */
.item-right {
	float: right;
	display: inline-block;
	width: 53%;
	text-align: right;
	padding: 5px;
	margin: 0;
	white-space: nowrap;
}

JS script:

$("#suggester2").autocomplete({
	// nemá zmysel hľadať subjekty pre menej ako 3 písmená - výsledky sú irelevantné
	minLength: 3,

	// (msec) požiadavku odošleme až keď užívateľ ukončil písanie (throttling)
	delay : 500,

	// responsivita - zabezpečíme posun zoznamu pri zmene veľkosti okna
	appendTo : "#wrapper-suggester2",

	// centrujeme mierne posunuté doľava a nadol
	position : {
		my : "left+2 top+5"
	},

	// načítanie zoznamu subjektov prostredníctvom funkcie
	source : function(request, response){

		var msg = $("#suggester2-message"),
			me = this.element,
			err = '';

		// ak zostalo z predošlej požiadavky koliesko/loader, odstránime ho
		$(".spinner-border").remove();

		// kontrola vstupu od užívateľa, musí byť 3 - 20 znakov
		request.term = request.term.replace(/[ ]+$/g, ' '); // flatten whitespaces
		if (!$.trim(request.term)) {
			err = 'Zadajte názov firmy alebo meno podnikateľa.';
		} else if(request.term.length < 3) {
			err = 'Príliš krátky názov, zadajte aspoň 3 znaky.';
		} else if(request.term.length > 20) {
			err = 'Príliš dlhý názov, zadajte najviac 20 znakov.';
		}

		if (err) {
			me.autocomplete('close');
			msg.html('<div class="alert alert-danger">'+err+'</div>');
			return;
		}

		// spinner - koliesko
		$('<span class="spinner-border text-muted" '
			+'style="position:absolute;right:0;top:0;"></span>').insertAfter(me);

		// načítame zoznam subjektov
		$.post({
			url: "https://bizdata.sk/api/v1/search-company",
			data: {
				xauth: "my-secret-key",
				term: request.term
				//is_active: 'any',
				//option_size: 3,
				//option_find_inside: 0,
				//option_extra_field: 'text_druh_vlastnictva, orsr_den_zapisu'
			},
			complete: function() {
				$(".spinner-border").remove();
			},
			success: function (resp) {
				if (resp && resp.length && resp[0]['label'] != undefined) {
					// clear previous error
					msg.html("");
					// render list items
					response($.map(resp, function(item) {
						return {
							label: item.label,
							value: item.value
						}
					}));
				} else {
					// chyba ošetrená a vrátená serverom
					var e = resp.errorMsg ? resp.errorMsg : "Žiadne záznamy.";
					msg.hide().html('<div class="alert alert-danger">'+e+'</div>').fadeIn();
					me.autocomplete('close');
				}
			},
			error: function(xhr) {
				// typicky chyba spojenia alebo neošetrená chyba
				var txt = 'Chyba spojenia.';
				if(xhr && xhr.responseJSON && xhr.responseJSON.errorMsg != undefined){
					txt = 'Chyba! ' + xhr.responseJSON.errorMsg;
				}
				msg.html('<div class="alert alert-danger">'+txt+'</div>');
				me.autocomplete('close');
			}
		})
	},

	create : function() {
		// vlastné formátovanie zoznamu subjektov s IČO, DIČ
		$(this).data('ui-autocomplete')._renderItem = function( ul, item ) {
			var data = $.parseJSON( item.value ),
				name = item.label.substring(0, 22);
			// zvýrazníme text
			name = String($.trim(name))
					.replace(new RegExp($.trim(this.term), "gi"), "<b>$&</b>");
			if(data.dic){
				data.dic = String($.trim(data.dic))
					.replace(new RegExp($.trim(this.term), "gi"), "<b>$&</b>");
			}
			if(data.ico){
				data.ico = String($.trim(data.ico))
					.replace(new RegExp($.trim(this.term), "gi"), "<b>$&</b>");
			}
			// vložíme záznam s IČO, DIČ ..
			return $( "<li class='item-wrapper'>"
					  +"<div class='item-left'>"
						+ name + (item.label.length > 22 ? ".." : "")
					  +"</div>"
					  +"<div class='item-right'>"
						+(data.dic ? " &nbsp; DIČ: "+data.dic : "")
						+(data.ico ? " &nbsp; IČO: "+data.ico : "")
					  +"</div>"
					+"</li>" ).appendTo( ul );
		};
	},

	// vypneme nastavenie "value" hodnoty, nakoľko by nastavilo nezmyselný JSON reťazec
	focus : function(event, ui) {
		event.preventDefault();
	},

	// spracovanie zvolenej položky zo zoznamu
	select : function(event, ui) {
		event.preventDefault();
		$(this).val( ui.item.label );
		try{
			// dekódujeme JSON reťazec - údaje subjektu
			var data = $.parseJSON( ui.item.value );
			if (data) {
				var txt = "<div class='jumbotron p-3 mb-0'><u>Vybratý záznam:</u>"
					+"<br>Názov: <b>" + data.obchodne_meno + "</b>"
					+"<br>Adresa: " + data.addr_street_nr +", "
									+ data.addr_zip +" "+ data.addr_city
					+(data.ico ? "<br>IČO: " + data.ico : "")
					+(data.dic ? "<br>DIČ: " + data.dic : "")
					+"<br>Vznik: " + data.date_vznik
					+"<br>Typ osoby: " + data.kod_typ_osoby
					+"<br>Subjekt aktívny: " + (data.is_active ? 'Áno' : 'Nie')
					+"<br> ... </div>";

				$("#suggester2-message").html(txt);

				// nastavíme údaje subjektu do potrebných polí
				$("#company-name").val(data.obchodne_meno);
				$("#company-street-number").val(data.addr_street_nr);
				$("#company-zip-city").val(data.addr_zip +" "+ data.addr_city);
				$("#company-ico").val(data.ico ? data.ico : "-");
				// ... atď ...
			}
		} catch (error) {
			alert("Neplatné JSON údaje .. \n"+error);
		}
	}
});

« Metódy a parametre Príklad - vanilla JS »

Kľúčové slová

API Integrácia - jQuery UI autocomplete

bizdata.sk

Linky

Akceptované platby

Kontakt