jqxInput, autoselect on blur - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: blur, database, Input, jqxinput, json, placeHolder, value

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

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

1 2 →

Author

jqxInput, autoselect on blur Posts

August 25, 2013 at 2:59 pm 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

August 26, 2013 at 7:21 am 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/

August 26, 2013 at 2:26 pm 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

August 27, 2013 at 5:41 am 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/

August 27, 2013 at 7:22 am 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

August 28, 2013 at 7:08 am 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/

August 28, 2013 at 2:52 pm 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

August 29, 2013 at 6:28 am 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/

September 1, 2013 at 7:47 pm 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

September 2, 2013 at 6:28 am 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/

September 2, 2013 at 11:02 pm 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

September 3, 2013 at 10:08 am 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/

September 3, 2013 at 2:26 pm 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>

September 4, 2013 at 7:08 am 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>

October 23, 2015 at 11:52 am 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?.

Author

Posts

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

1 2 →

You must be logged in to reply to this topic.