jQuery UI Widgets Forums Lists ComboBox jqxComboBox search event not firing on 2nd entry of same search string

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 week, 6 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • ad-lightbeam
    Participant

    I am using the jqxComboBox with a dataAdapter as the source to get search results back from a server side api call to populate the combobox. I am having an issue where none of the events are being fired – “search” of the jqxComboBox, “formatData” or “loadComplete” of the dataAdapter – if the text entered into the jqxComboBox immediately following a successful search matches exactly with the text that trigger the 1st search

    For example, if “smith” is typed into the jqxComboBox all events fire, it calls the url for the api and I get all the search results – all good. If the text is cleared and “smith” is reentered no events fire. If I backspace one character so it the text is “smit” all events fire. Then if I retype the “h” so it is “smith” again, all events fire.

    It is giving the appears that the jqxComboBox is caching the text string that triggered the search and not triggering the search if the text entered matches the search string in the jqxComboBox cache. Wondering if there is some setting or workflow I can use to trigger all events every time. Below is the implementation of the jqxComboBox and dataAdapter being used in my code.

    Any help would be appreciate thanks.

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘LastName’ },
    { name: ‘FirstName’ },
    { name: ‘ID’ }
    ],
    id: ‘ID’,
    url: this.url,

    data: {
    featureClass: “P”,
    style: “full”,
    maxRows: 12
    }
    };

    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    autoBind: true,
    formatData: function (data) {
    var searchInput = $(this.Container.jId).jqxComboBox(‘val’);
    if (searchInput) {
    data.searchString = searchInput;
    }
    return data;

    },
    loadComplete: function (data) {
    if (data.length > 0) {
    $(this.Container.jId).jqxComboBox(‘open’);
    }

    }
    }
    );

    $(this.Container.jId).jqxComboBox(
    {
    width: ‘100%’,
    height: 28,
    source: dataAdapter,
    remoteAutoComplete: true,
    remoteAutoCompleteDelay = 200,
    selectedIndex: 0,
    minLength: 2,
    displayMember: “LastName”,
    valueMember: “ID”,
    renderer: function (index, label, value) {
    var item = dataAdapter.records[index];
    return item.LastName + ” ” + item.LastName;
    },
    renderSelectedItem: function (index, item) {
    var item = dataAdapter.records[index];
    if (item != null) {
    return item.LastName + ” ” + item.LastName
    }
    return “”;
    },
    search: function (searchString) {
    dataAdapter.dataBind();
    }
    });


    Hristo
    Participant

    Hello ad-lightbeam,

    I tested this example and it seems to work fine:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this example is demonstrated the auto-complete feature of jqxComboBox. Suggestions are displayed when at least two characters are entered into the field.</title>
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    datatype: "jsonp",
                    datafields: [
                        { name: "countryName" },
                        { name: "name" },
                        { name: "population", type: "float" },
                        { name: "continentCode" },
                        { name: "adminName1" }
                    ],
                    url: "http://api.geonames.org/searchJSON",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        username: "jqwidgets"
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source,
                    {
                        formatData: function (data) {
                            if ($("#jqxcombobox").jqxComboBox("searchString") != undefined) {
                                data.name_startsWith = $("#jqxcombobox").jqxComboBox("searchString");
                                return data;
                            }
                        }
                    }
                );
    
                $("#jqxcombobox").jqxComboBox(
                {
                    width: 250,
                    height: 25,
                    source: dataAdapter,
                    remoteAutoComplete: true,
                    autoDropDownHeight: true,               
                    selectedIndex: 0,
                    displayMember: "name",
                    valueMember: "countryName",
                    renderer: function (index, label, value) {
                        var item = dataAdapter.records[index];
                        if (item != null) {
                            var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                            return label;
                        }
                        return "";
                    },
                    renderSelectedItem: function(index, item)
                    {
                        var item = dataAdapter.records[index];
                        if (item != null) {
                            var label = item.name;
                            return label;
                        }
                        return "";   
                    },
                    search: function (searchString) {
                        dataAdapter.dataBind();
                    }
                });
            });
        </script>
    </head>
    <body class="default">
        <div id="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
            <span>Search for a City:</span>
            <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox"></div>
            <span>ex: be</span>
        </div>
    
    	<div style="position: absolute; bottom: 5px; right: 5px;">
    		<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
    	</div>
    </body>
    </html>
    

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.