Ytils

Ytils Yupput live demo

Version 0.13.3

← Back to Yupput home.
← Back to Yupput developer documentation.

Want to see Yupput in action?

Press ctrl+shift+y or tap here and then type - for example - Baltic Sea or Ocean.

Latest Yupput action:

Yupput code in this demo

var yupput;
var demoInputHandle = document.getElementById("yupputDemoEvent");
var tapHandle = document.getElementById("ytilsYupputTapOpener");
var sampleData = Ytils.YupputOpenData.YtilsYupputDataDefault;

var yupputSelectionCallback = function(selectedYupputItem, inputValue) {

    demoInputHandle.value = "Selected item with value: " + selectedYupputItem.value;
    yupput.hide();
};

yupput = new Ytils.Yupput(sampleData, yupputSelectionCallback, {

    placeholder: "Welcome to the Yupput demo.",
    preloadImages: true,
    callbackOnChange: function(inputValue) {

        if (null === inputValue || inputValue === "") {

            demoInputHandle.value = "Yupput awaits your input.";

        } else {

            demoInputHandle.value = "Input changed: " + inputValue;
        }
    },
    callbackThumbnailClick: function(itemVal, itemThumbnail) {

        demoInputHandle.value = "Clicked thumbnail image: " + itemThumbnail;
    }
});

tapHandle.onclick = function() {

    yupput.show();
};