JavaScript Input

Bind to the change event by type: jqxInput. Author: http://jqwidgets.com

by Alexey Sharifullin

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxInputX" />

<div style="margin-left: 300px;" id="log"></div>
<div><input type="button" value="show value" id="showValue"/></div>

CSS

.delButton {
    cursor: pointer;
    font-family: sans-serif;
    padding: 2px 2px 2px 2px;
}

JavaScript

function jqxInputX(settings, id) {
    this.settings = settings;
    this.settings.width = settings.width - 25;
    this.id = id;
    this.init();
}
jqxInputX.prototype.init = function() {

    $("#"+this.id).append("<input id='" + this.id + "_in' /><span class='delButton' id='" + this.id + "_del' >x</span>");
    var inputId = "#" + this.id + "_in";
    $(inputId).jqxInput(this.settings);
    $("#" + this.id + "_del").on("click", function(){
        $(inputId).jqxInput('val', '');
    });

}
    var countries = new Array(
      {name: "Marina", id:1},
      {name: "Alexey", id:2}
    );


new jqxInputX({placeHolder: "Enter a Country",
    height: 25,
    width: 200,
    minLength: 1,
    source: countries,
    displayMember: "name",
    valueMember: "id",
    theme: 'energyblue'}, "jqxInputX");

$("#showValue").jqxButton({});
$("#showValue").on("click", function() {
    $("#log").append(JSON.stringify($("#jqxInputX_in").jqxInput('val')));
});
$('#input').on('change',

function () {
    $("#log").html("Bind to the change event");
});