This topic contains 19 replies, has 3 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • jqxInput, autoselect on blur #27635

    brio
    Participant

    Hi, I’m newbie.
    I don’t know how to select the first result of the popup menu on blur.
    I need to force user’s choice before leaving the input.
    Can you help, please.
    Francesco

    jqxInput, autoselect on blur #27661

    Dimitar
    Participant

    Hello Francesco,

    Here is an example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    </head>
    <body class='default'>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
    $("#input").jqxInput({ placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1, theme: theme, source: countries });
    $("#input").on("blur", function () {
    var placeHolder = $('#input').jqxInput("placeHolder");
    var value = $('#input').jqxInput('val');
    if (value == "" || value == placeHolder) {
    $('#input').jqxInput('val', "Afghanistan");
    };
    });
    });
    </script>
    <input type="text" id="input" />
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxInput, autoselect on blur #27715

    brio
    Participant

    Hi Dimitar,
    first of all thanks for answering; that’s quite what I’m intending to do.
    In your example, I’d like to force, on blur event, to choose the nearest suggested item or nothing.

    When user types “ro”, popup suggests “Romania”; if user leaves the input (on blur event), input chooses “Romania”.
    When user types “rtdf”, popup doen’t suggests anything; if user leaves the input (on blur event), input becomes blank.

    In my mind it’s something like:

    $("#input").on("blur", function () {
    if (popupdata.length > 0) {
    $('#input').jqxInput('val', popupdata.firsItem);
    };
    };

    What’s the right code?

    Thanks and best regards
    Francesco

    jqxInput, autoselect on blur #27757

    Dimitar
    Participant

    Hi Francesco,

    Here is the updated example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    </head>
    <body class='default'>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
    $("#input").jqxInput({ placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1, theme: theme, source: countries });
    $("#input").on("blur", function () {
    var placeHolder = $('#input').jqxInput("placeHolder");
    var value = $('#input').jqxInput('val');
    if (value == "" || value == placeHolder) {
    return;
    } else {
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = value;
    var filtercondition = 'STARTS_WITH';
    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    var filteredCountries = new Array();
    for (var i = 0; i < countries.length; i++) {
    var result = filter.evaluate(countries[i]);
    if (result) {
    filteredCountries.push(countries[i]);
    };
    };
    if (filteredCountries.length > 0) {
    $("#input").jqxInput("value", filteredCountries[0])
    } else {
    $("#input").jqxInput("value", "");
    };
    };
    });
    });
    </script>
    <input type="text" id="input" />
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxInput, autoselect on blur #27762

    brio
    Participant

    Hi Dimitar,
    that’s the effect I was needing.
    Matter is I’m not using a visible array; I’m connecting to a mysql db.

    here is my simplified code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.maskedinput.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var theme = getDemoTheme();
    $("#jqxinput").jqxInput(
    {
    theme: theme,
    width: 200,
    height: 25,
    minLength: 2,
    source: function(query, response) {
    var dataAdapter = new $.jqx.dataAdapter
    (
    {
    datatype: "json",
    datafields: [{name: 'comune', type: 'string'}],
    url: 'data.php'
    },
    {
    autoBind: true,
    formatData: function(data) {
    data.query = query;
    return data;
    },
    loadComplete: function(data) {
    if (data.length > 0) {
    response($.map(data, function(item) {
    return item.comune;
    }));
    }
    }
    }
    );
    }
    });
    $("#jqxinput").on("blur", function() {
    //how can I adapt Dimitar's code???
    });
    });
    </script>
    <style type="text/css">
    .text-input
    {
    height: 21px;
    width: 150px;
    }
    .register-table
    {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .register-table td,
    .register-table tr
    {
    margin: 0px;
    padding: 2px;
    border-spacing: 0px;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 12px;
    }
    h3
    {
    display: inline-block;
    margin: 0px;
    }
    </style>
    </head>
    <body class='default'>
    <div id="register">
    <div><h3>Registrazione</h3></div>
    <div>
    <form id="testForm" action="./">
    <table table class="register-table">
    <tr>
    <td>comune di residenza:</td>
    <td><input id="jqxinput"/></td>
    </tr>
    </table>
    </form>
    </div>
    </div>
    </body>
    </html>
    </body>
    </html>

    Just one help more, please.
    Thanks
    Francesco

    jqxInput, autoselect on blur #27834

    Dimitar
    Participant

    Hi Francesco,

    Here is a possible solution:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.maskedinput.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var sourceFuntion = function (query, response) {
    var dataAdapter = new $.jqx.dataAdapter
    (
    {
    datatype: "json",
    datafields: [{ name: 'comune', type: 'string'}],
    url: 'data.php'
    },
    {
    autoBind: true,
    formatData: function (data) {
    data.query = query;
    return data;
    },
    loadComplete: function (data) {
    if (data.length > 0) {
    response($.map(data, function (item) {
    return item.comune;
    }));
    }
    }
    }
    );
    };
    var source = sourceFuntion(query, response);
    $("#jqxinput").jqxInput(
    {
    theme: theme,
    width: 200,
    height: 25,
    minLength: 2,
    source: source
    });
    $("#jqxinput").on("blur", function () {
    var placeHolder = $('#jqxinput').jqxInput("placeHolder");
    var value = $('#jqxinput').jqxInput('val');
    if (value == "" || value == placeHolder) {
    return;
    } else {
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = value;
    var filtercondition = 'STARTS_WITH';
    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    var filteredCountries = new Array();
    for (var i = 0; i < source.length; i++) {
    var result = filter.evaluate(source[i]);
    if (result) {
    filteredCountries.push(source[i]);
    };
    };
    if (filteredCountries.length > 0) {
    $("#jqxinput").jqxInput("value", filteredCountries[0])
    } else {
    $("#jqxinput").jqxInput("value", "");
    };
    };
    });
    });
    </script>
    <style type="text/css">
    .text-input
    {
    height: 21px;
    width: 150px;
    }
    .register-table
    {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .register-table td, .register-table tr
    {
    margin: 0px;
    padding: 2px;
    border-spacing: 0px;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 12px;
    }
    h3
    {
    display: inline-block;
    margin: 0px;
    }
    </style>
    </head>
    <body class='default'>
    <div id="register">
    <div>
    <h3>
    Registrazione</h3>
    </div>
    <div>
    <form id="testForm" action="./">
    <table class="register-table">
    <tr>
    <td>
    comune di residenza:
    </td>
    <td>
    <input id="jqxinput" />
    </td>
    </tr>
    </table>
    </form>
    </div>
    </div>
    </body>
    </html>

    The sourceFunction function may require further changes, because it should return an array of values.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxInput, autoselect on blur #27863

    brio
    Participant

    Hi Dimitar,
    I changed “var source = sourceFuntion(query, response);” in “var source = sourceFuntion;” (did I mistake?).
    now it finds items on typing, but blur event is stil not working.
    I think “source” is null inside blur event.
    I’m sorry to keep on asking help.
    Best regards
    Francesco

    jqxInput, autoselect on blur #27915

    Dimitar
    Participant

    Hi Francesco,

    In the first case (var source = sourceFuntion(query, response);), source equals the value returned from the function. In the second case (var source = sourceFuntion;), source equals the function itself, i.e. it becomes a function. The first case is correct – you need source to contain an array of values.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxInput, autoselect on blur #28119

    brio
    Participant

    Hi Dimitar,

    I dont’ know how to make sourceFuntion returning an array of values.
    I tried few solutions and I failured.

    data.php returns json_encode($comuni).
    for example [{“comune”:”Abano Terme”},{“comune”:”Abbadia Cerreto”},{“comune”:”Abbadia Lariana”},{“comune”:”Abbadia San Salvatore”},{“comune”:”Abbasanta”},{“comune”:”Abbateggio”},{“comune”:”Abbiategrasso”},{“comune”:”Abetone”},{“comune”:”Abriola”},{“comune”:”Acate”}]

    do I have to change data.php or just loadComplete in function (query, response)?

    I think I can’t solve it by myself.

    Best regards.
    Francesco

    jqxInput, autoselect on blur #28134

    Dimitar
    Participant

    Hi Francesco,

    Here is another idea:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.maskedinput.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var dataAdapter = new $.jqx.dataAdapter(
    {
    datatype: "json",
    datafields: [{ name: 'comune', type: 'string'}],
    url: 'data.php'
    },
    {
    autoBind: true,
    formatData: function (data) {
    data.query = query;
    return data;
    },
    loadComplete: function (data) {
    if (data.length > 0) {
    response($.map(data, function (item) {
    return item.comune;
    }));
    }
    }
    });
    var source = dataAdapter;
    $("#jqxinput").jqxInput(
    {
    theme: theme,
    width: 200,
    height: 25,
    minLength: 2,
    source: source
    });
    $("#jqxinput").on("blur", function () {
    var placeHolder = $('#jqxinput').jqxInput("placeHolder");
    var value = $('#jqxinput').jqxInput('val');
    if (value == "" || value == placeHolder) {
    return;
    } else {
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = value;
    var filtercondition = 'STARTS_WITH';
    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    var filteredCountries = new Array();
    for (var i = 0; i < source.length; i++) {
    var result = filter.evaluate(source[i]);
    if (result) {
    filteredCountries.push(source[i]);
    };
    };
    if (filteredCountries.length > 0) {
    $("#jqxinput").jqxInput("value", filteredCountries[0])
    } else {
    $("#jqxinput").jqxInput("value", "");
    };
    };
    });
    });
    </script>
    <style type="text/css">
    .text-input
    {
    height: 21px;
    width: 150px;
    }
    .register-table
    {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .register-table td, .register-table tr
    {
    margin: 0px;
    padding: 2px;
    border-spacing: 0px;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 12px;
    }
    h3
    {
    display: inline-block;
    margin: 0px;
    }
    </style>
    </head>
    <body class='default'>
    <div id="register">
    <div>
    <h3>
    Registrazione</h3>
    </div>
    <div>
    <form id="testForm" action="./">
    <table class="register-table">
    <tr>
    <td>
    comune di residenza:
    </td>
    <td>
    <input id="jqxinput" />
    </td>
    </tr>
    </table>
    </form>
    </div>
    </div>
    </body>
    </html>

    Please also refer to the demo Binding to JSON Data.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxInput, autoselect on blur #28184

    brio
    Participant

    Hi Dimitar,
    this example forgets ‘query’ and ‘response’ parameters, still included in dataFormat and loadComplete.
    I think ‘query’ could be replaced by ‘$(‘#jqxinput’).jqxInput(‘val’);’.
    and ‘response’?
    Do you think I have not solved the problem by a long way?
    Thanks
    Francesco

    jqxInput, autoselect on blur #28212

    Dimitar
    Participant

    Hi Francesco,

    Here is a different approach, based on the demo Auto-Complete:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    </head>
    <body class='default'>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    var timer;
    var firstItem = new Object();
    $("#input").jqxInput({ placeHolder: "Enter a City", height: 25, width: 200, theme: theme,
    source: function (query, response) {
    var dataAdapter = new $.jqx.dataAdapter
    (
    {
    datatype: "jsonp",
    datafields:
    [
    { name: 'countryName' }, { name: 'name' },
    { name: 'population', type: 'float' },
    { name: 'continentCode' },
    { name: 'adminName1' }
    ],
    url: "http://ws.geonames.org/searchJSON",
    data:
    {
    featureClass: "P",
    style: "full",
    maxRows: 12
    }
    },
    {
    autoBind: true,
    formatData: function (data) {
    data.name_startsWith = query;
    return data;
    },
    loadComplete: function (data) {
    firstItem = data.geonames[0];
    if (data.geonames.length > 0) {
    response($.map(data.geonames, function (item) {
    return {
    label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
    value: item.name
    }
    }));
    }
    }
    }
    );
    }
    });
    $("#input").on("blur", function () {
    var placeHolder = $('#input').jqxInput("placeHolder");
    var value = $('#input').jqxInput('val');
    if (value == "" || value == placeHolder) {
    return;
    } else {
    if (firstItem) {
    var label = firstItem.name + (firstItem.adminName1 ? ", " + firstItem.adminName1 : "") + ", " + firstItem.countryName;
    $('#input').jqxInput('val', label);
    };
    };
    });
    });
    </script>
    <input type="text" id="input" />
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxInput, autoselect on blur #28235

    brio
    Participant

    Hi Dimitar,

    that’s the right example!
    I was very very near to this solution.
    But probably I couldn’t solve the matter alone.
    Thanks alot.
    Francesco

    p.s.: I paste my code for everybody.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.maskedinput.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var theme = getDemoTheme();
    var firstItem = new Object();
    $("#jqxinput").jqxInput(
    {
    theme: theme,
    width: 200,
    height: 25,
    minLength: 2,
    source: function(query, response) {
    var dataAdapter = new $.jqx.dataAdapter
    (
    {
    datatype: "json",
    datafields: [{name: 'comune', type: 'string'}],
    url: 'data.php'
    },
    {
    autoBind: true,
    formatData: function(data) {
    data.query = query;
    return data;
    },
    loadComplete: function(data) {
    firstItem = data[0];
    if (data.length > 0) {
    response($.map(data, function(item) {
    return item.comune;
    }));
    }
    ;
    }
    }
    );
    }
    });
    $("#jqxinput").on("blur", function () {
    var placeHolder = $('#jqxinput').jqxInput("placeHolder");
    var value = $('#jqxinput').jqxInput('val');
    if (value == "" || value == placeHolder) {
    return;
    } else {
    if (firstItem) {
    var label = firstItem.comune;
    $('#jqxinput').jqxInput('val', label);
    };
    };
    });
    });
    </script>
    <style type="text/css">
    .text-input
    {
    height: 21px;
    width: 150px;
    }
    .register-table
    {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .register-table td, .register-table tr
    {
    margin: 0px;
    padding: 2px;
    border-spacing: 0px;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 12px;
    }
    h3
    {
    display: inline-block;
    margin: 0px;
    }
    </style>
    </head>
    <body class='default'>
    <div id="register">
    <div>
    <h3>
    Registrazione</h3>
    </div>
    <div>
    <form id="testForm" action="./">
    <table class="register-table">
    <tr>
    <td>
    comune di residenza:
    </td>
    <td>
    <input id="jqxinput" />
    </td>
    </tr>
    </table>
    </form>
    </div>
    </div>
    </body>
    </html>
    jqxInput, autoselect on blur #28279

    brio
    Participant

    better code.
    bye

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.maskedinput.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var theme = getDemoTheme();
    var firstItem = new Object();
    $("#jqxinput").jqxInput(
    {
    theme: theme,
    width: 200,
    height: 25,
    minLength: 2,
    source: function(query, response) {
    var dataAdapter = new $.jqx.dataAdapter
    (
    {
    datatype: "json",
    datafields: [{name: 'comune', type: 'string'}],
    url: 'data.php'
    },
    {
    autoBind: true,
    formatData: function(data) {
    data.query = query;
    return data;
    },
    loadComplete: function(data) {
    firstItem = data[0];
    if (data.length > 0) {
    response($.map(data, function(item) {
    return item.comune;
    }));
    }
    ;
    }
    }
    );
    }
    });
    $("#jqxinput").on("blur", function() {
    var placeHolder = $('#jqxinput').jqxInput("placeHolder");
    var value = $('#jqxinput').jqxInput('val');
    if (value == "" || value == placeHolder) {
    return;
    } else {
    if (firstItem) {
    var label = firstItem.comune;
    if (value.length > label.length) {
    $('#jqxinput').jqxInput('val', "");
    } else {
    if (label.toLowerCase().substr(0, value.length) == value.toLowerCase()) {
    $('#jqxinput').jqxInput('val', label);
    }
    else {
    $('#jqxinput').jqxInput('val', "");
    }
    }
    }
    ;
    }
    ;
    });
    });
    </script>
    <style type="text/css">
    .text-input
    {
    height: 21px;
    width: 150px;
    }
    .register-table
    {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    .register-table td, .register-table tr
    {
    margin: 0px;
    padding: 2px;
    border-spacing: 0px;
    border-collapse: collapse;
    font-family: Verdana;
    font-size: 12px;
    }
    h3
    {
    display: inline-block;
    margin: 0px;
    }
    </style>
    </head>
    <body class='default'>
    <div id="register">
    <div>
    <h3>
    Registrazione</h3>
    </div>
    <div>
    <form id="testForm" action="./">
    <table class="register-table">
    <tr>
    <td>
    comune di residenza:
    </td>
    <td>
    <input id="jqxinput" />
    </td>
    </tr>
    </table>
    </form>
    </div>
    </div>
    </body>
    </html>
    jqxInput, autoselect on blur #77257

    Rana
    Participant

    Hi,
    In the above example the very first value in the popup is selected as default value if user selects nothing.
    I am in similar situation. If user enters a value which does not exist in auto-popup list, i need the input value updated with place holder.
    How to achieve that?.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.