jQuery UI Widgets Forums Getting Started jqxinput autopopulate

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxinput autopopulate #69587

    rose88
    Participant

    Hi, I have a question regards “jqxInput”.

    I have auto populate Description and also based on selected item, there will code which will auto fill on another field. Its works fine and now I want to insert a input which not in populated/dropdown list. But the problem is, when I type something, whenever the keyword match the list rollout and hold the first populated item and it will fixed even I typed something different phrases. Here is the code.

    /*Autocomplete Function for Description*/
    $(“#complaintName”).jqxInput({
    width: ‘98%’,
    theme: “”,
    height: 30,
    placeHolder: “Enter Description”,
    source: function(query, response) {
    var version = <?php echo Configure::read(‘General.ICDVersion’); ?>;
    var description = $(‘#complaintName’).val();
    if(description.length>2){
    $.when(
    $.ajax({
    url: ‘<?php echo Router::url(array(‘controller’=> ‘icdSearch’, ”)); ?>’,
    data: {
    description : description,
    version : version
    },
    type: ‘POST’,
    beforeSend: function() {
    $.mobile.loading(‘show’);
    },
    })
    ).done(function(dataCostCenter){
    $.mobile.loading(‘hide’);
    var dataCostCenterValue = jQuery.parseJSON(dataCostCenter);
    dataStore = new Array();
    if(dataCostCenterValue){
    for(var i = 0; i < dataCostCenterValue.length; i++){
    var row = {};
    row[‘code’] = dataCostCenterValue[i].code;
    row[‘description’] = dataCostCenterValue[i].description;
    dataStore[i] = row;
    }
    }

    var dataAdapter = new $.jqx.dataAdapter({
    datatype: “json”,
    datafields:
    [
    {name: ‘code’},
    {name: ‘description’}
    ],
    localdata: dataStore
    },
    {
    autoBind: true,
    formatData: function(data) {
    data.code_startsWith = query;
    return data;
    },
    loadComplete: function(data) {
    if (data.length > 0) {
    response($.map(data, function(item) {
    return {
    label: item.description,
    value: item.code + ‘ ^^_^^ ‘ + item.description
    }
    }));
    }
    }
    });
    });
    }

    }
    });

    $(‘#complaintName’).on(‘select’, function(event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var value = item.value;
    var detail = value.split(‘ ^^_^^ ‘);
    $(‘#complaintCode’).val(detail[0]);
    $(‘#complaintName’).val(detail[1]);
    }
    }
    });
    /*End Autocomplete Function Description*/

    jqxinput autopopulate #69624

    Dimitar
    Participant

    Hi rose88,

    We do not experience such an issue with any of the jqxInput demos showing the autocomplete functionality. Please check these out. If you continue to experience the issue, please provide us with a complete example we can test. Remember to format your code by selecting it and clicking the code button in the toolbar.

    Best Regards,
    Dimitar

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

    jqxinput autopopulate #83864

    richa_k
    Participant

    Hi,

    I am facing the same issue. If I have already selected a value from the autocomplete dropdown box, then, if I change the value in the text field then it retains the previously selected value as the ‘value’ of the jqxinput instead of the newly typed value.
    Here is an example code. I noticed that the issue comes when displayMember and valueMember are specified.

    div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {              
                    var countries = [{'name':"Afghanistan",'code':'Af'}, {'name':"Albania",'code':'Al'}];
                    $("#input").jqxInput({placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1,  source: countries, displayMember: "name", valueMember: "code" });
    				
    				 $( "#test" ).click(function(event) {
    					$('#result').text($("#input").val().value);
    
            });
                });
    			
    			
            </script>
           <input type="text" id="input"/>
    	   <input type='button' id='test' value='Select'></button>    </div>
    	   <div id='result'></div>

    How do I fetch the typed value?

    Thanks
    -Richa

    jqxinput autopopulate #83866

    Dimitar
    Participant

    Hi Richa,

    Thank you for your feedback. Here is a workaround for this issue:

    <!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>
        <script type="text/javascript">
            $(document).ready(function () {
                var countries = [{
                    'name': "Afghanistan",
                    'code': 'Af'
                }, {
                    'name': "Albania",
                    'code': 'Al'
                }];
                $("#input").jqxInput({
                    placeHolder: "Enter a Country",
                    height: 25,
                    width: 200,
                    minLength: 1,
                    source: countries,
                    displayMember: "name",
                    valueMember: "code"
                });
    
                $('#input').on('change', function (event) {
                    if (event.args.value === undefined) {
                        var inputValue = event.target.value;
                        $('#input').val({ label: inputValue, value: inputValue })
                    }
                });
    
                $("#test").click(function (event) {
                    $('#result').text($("#input").val().value);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='content'>
            <input type="text" id="input" />
            <input type='button' id='test' value='Select' />
        </div>
        <div id='result'></div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    jqxinput autopopulate #83868

    richa_k
    Participant

    Thanks Dimitar, that did the trick.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.