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

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
  • 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", "");
                         };
                     };              
                });
    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/

    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?

    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

    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/

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

You must be logged in to reply to this topic.