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 9 years, 1 month ago.

Viewing 5 posts - 16 through 20 (of 20 total)

← 1 2

Author

jqxInput, autoselect on blur Posts

October 23, 2015 at 12:00 pm jqxInput, autoselect on blur #77258

Rana

Participant

my code is here

	var Source = function (request, response) {
				var billingDataAdapter = new $.jqx.dataAdapter
	            (
	                {
	                    datatype: "json",
	                    datafields:
	                    [
	             
	                    ],
	                    url: "URL***********",
	                    data:
	                    {
				        	  idStartsWith:request.term
	                    }
	                },
	                {
	                    autoBind: true,
	                    formatData: function (data) {
	                        data.idStartsWith = request;
	                        return data;
	                    },
	                    loadComplete: function (data) {
	                        if (data.length > 0) {
	                            response($.map(data, function (item) {
	                                return {
	                                	label: item.id,
	                                    value: item.id
	                                }
	                            }));
	                        }
	                    }
	                }
	            );
			}
			
			$("#autoCompleteDiv").jqxInput(
					{ placeHolder: "Enter  here", height: 25, width: 200, minLength: 1, 
                		source: Source
            });
			
			$("#autoCompleteDiv").on("blur", function () {
                 var placeHolder = $('#autoCompleteDiv').jqxInput("placeHolder");
                 var value = $('#autoCompleteDiv').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('numericfilter', filtervalue, filtercondition);
                     var filteredBillings = new Array();
                     for (var i = 0; i < Source.length; i++) {
                         var result = filter.evaluate(Source[i]);
                         if (result) {
                             filteredBillings.push(Source[i]);
                         };
                     };
                     if (filteredBillings.length > 0) {
                         $("#autoCompleteDiv").jqxInput("value", filteredBillings[0])
                     } else {
                         $("#autoCompleteDiv").jqxInput("value", "");
                     };
                 };              
            });

October 23, 2015 at 12:52 pm jqxInput, autoselect on blur #77262

Dimitar

Participant

Hello Rana,

The following example shows the functionality you require:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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 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, source: countries });
                $("#input").on('blur', function (event) {
                    if (countries.indexOf(event.target.value) === -1) {
                        // new value is not in countries array
                        $('#input').val('Placeholder');
                    }
                });
            });
        </script>
        <input type="text" id="input" />
    </div>
</body>
</html>

Best Regards,
Dimitar

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

October 23, 2015 at 1:01 pm jqxInput, autoselect on blur #77263

Rana

Participant

Thanks Dimitar.
I am using remote data in auto popup.
Using Source/DataAdapter
Any code snippet in that model?

October 23, 2015 at 3:21 pm jqxInput, autoselect on blur #77268

Rana

Participant

http://jsfiddle.net/Ngudz/32/
code is here.
1) Enter ‘a’
2) Do not select any of values auto populated
3) take focus out of text box

the value ‘a’ should be disappeared

October 26, 2015 at 7:07 am jqxInput, autoselect on blur #77300

Dimitar

Participant

Hi Rana,

Here is how to achieve your requirement with bindings to the focus, select and blur events: http://jsfiddle.net/Dimitar_jQWidgets/qe2jwkL4/.

Best Regards,
Dimitar

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

Author

Posts

Viewing 5 posts - 16 through 20 (of 20 total)

← 1 2

You must be logged in to reply to this topic.