jQWidgets Forums

Tagged: jqxComboBox dataAdapter search event

This topic contains 3 replies, has 2 voices, and was last updated by Hristo 4 years ago.

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

Author

jqxComboBox search event not firing on 2nd entry of same search string Posts

March 30, 2021 at 8:55 pm jqxComboBox search event not firing on 2nd entry of same search string #114997

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();
}
});

March 31, 2021 at 11:49 am jqxComboBox search event not firing on 2nd entry of same search string #115007

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

April 20, 2021 at 5:53 pm jqxComboBox search event not firing on 2nd entry of same search string #115103

ad-lightbeam

Participant

Hristo,
After much research, I discovered my problem was related to the following known issue

https://www.jqwidgets.com/community/topic/remoteautocomplete-search-not-invoked-if-shift-key-is-down/

April 21, 2021 at 6:46 am jqxComboBox search event not firing on 2nd entry of same search string #115105

Hristo

Participant

Hello ad-lightbeam,

I tested the previously created demo and it seems to work fine with the Shift key pressed.
Please, clarify it, it will be better if you could provide us with one simple example that demonstrates your case (in the jseditor or in the jsfiddle).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.