Demo – upravený text v našeptávači
Ukázka možnosti změnit text v našeptávači adres.
Využívá dvou funkcí, které lze nastavit ve Smartform API:
suggestionFormatter
– je volán před zobrazením každého řádku v našeptávači; umožňuje měnit text v našeptávači – viz dokumentace metodysetSuggestionFormatter
.selectionCallback
– je volán před zápsaním textu do vstupního políčka poté, co uživatel vybere jeden řádek v našeptávači – viz dokumentace metodysetSelectionCallback
.
Prohození obce a PSČ při našeptávání celé adresy:
Při našeptávání celé adresy v našeptávači u políčka „ulice a číslo“ je adresa standardně ve formátu „ulice a číslo, PSČ obec“. V následujícím formuláři je PSČ a obec v našeptávači prohozená.
Prohození obce a PSČ při našeptávání a při vyplnění celé adresy do políčka:
Při našeptávání celé adresy v našeptávači u políčka „ulice a číslo“ je adresa standardně ve formátu „ulice a číslo, PSČ obec“. V následujícím formuláři je PSČ a obec v našeptávači prohozená. Prohozená adresa se také vyplní do textového políčka.
Zdrojový kód – JavaScript:
<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
var smartform = smartform || {};
smartform.beforeInit = function () {
smartform.setClientId('[clientId]');
}
smartform.afterInit = function() {
// na první instanci prohodíme PSČ a obec v textu našeptávače
smartform.getInstance( "smartform-instance-1" ).addressControl.setSuggestionFormatter( swapCityZipSuggestionFormatter );
// na druhé instanci prohodíme PSČ a obec v textu našeptávače
smartform.getInstance( "smartform-instance-2" ).addressControl.setSuggestionFormatter( swapCityZipSuggestionFormatter );
// na druhé instanci po výběru řádku v našeptávači vyplníme do políčka zformátovanou adresu, kde také prohodíme PSČ a obec
smartform.getInstance( "smartform-instance-2" ).addressControl.setSelectionCallback( wholeAddressSelectionCallback );
}
/* Formátuje celou adresu pro našeptávač. Prohazuje pořadí obce a PSČ. */
function swapCityZipSuggestionFormatter( suggestion, fieldType ){
if ( suggestion.isWholeAddress() ) {
return suggestion.getValue("smartform-address-street-and-number") + ", " + suggestion.getValue("smartform-address-city") + ", " + suggestion.getValue("smartform-address-zip");
}
return null; // pouzije se defaultni format
}
/* Když uživatel vybere řádek v našeptávači, do políčka "celá adresa" se dostane zformátovaná adresa z našeptávače. */
function wholeAddressSelectionCallback(element, text, fieldType, suggestion){
if( suggestion.isWholeAddress() && fieldType=="smartform-address-whole-address" ) {
element.value = suggestion.getValue("smartform-address-street-and-number") + ", " + suggestion.getValue("smartform-address-city") + ", " + suggestion.getValue("smartform-address-zip");
return false;
}
else
return true; // pouzije se defaultni hodnota
}
</script>
Zdrojový kód – HTML pro první formulář:
<form>
<input class="smartform-instance-1 smartform-address-street-and-number" id="smartform_ulice1" placeholder="Ulice a číslo" type="text" />
<input class="smartform-instance-1 smartform-address-city" id="smartform_obec1" placeholder="Obec" type="text" />
<input class="smartform-instance-1 smartform-address-zip" id="smartform_psc1" placeholder="PSČ" type="text" />
</form>
Zdrojový kód – HTML pro druhý formulář:
<form>
<input class="smartform-instance-2 smartform-address-whole-address" id="adresa" type="text" />
</form>