jQuery UI Widgets Forums Lists ComboBox RemoteAutoComplete

This topic contains 2 replies, has 2 voices, and was last updated by  taskmate 8 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • RemoteAutoComplete #84345

    taskmate
    Participant

    Sir

    When the remoteautocomplete is set to 2 and as soon as 2 charectors are typed / inserted , the request is fired and all the existing items are cleared.

    The problem arises when
    Suppose My existing list has

    Inde
    Indo
    India
    Indiapolis

    If I type ‘In’ then also the list is cleared and remote search is fired.

    Would adding a property like ‘Send for search only if not in current list’ a option that could be implemented

    Regards

    Sanjay Gupta

    RemoteAutoComplete #84364

    Hristo
    Participant

    Hello Sanjay Gupta,

    You could use this workaround. Focus on the ‘search’ callback.

    <!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="../../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) {
                        if (dataAdapter.records && dataAdapter.records.length > 0) {
                            for (var i = 0; i < dataAdapter.records.length; i++) {
                                var name = dataAdapter.records[i].name.toLowerCase();
                                searchString = searchString.toLowerCase();
                                if (name.indexOf(searchString) !== -1) {
                                    return;
                                }
                            }
                        }
                        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>
    </body>
    </html>

    This is based on ‘Remote search’ demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?arctic

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    • This reply was modified 8 years, 1 month ago by  Hristo.
    RemoteAutoComplete #84368

    taskmate
    Participant

    Hi Hristov

    Thanks

    I works beutifully.

    Regards

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

You must be logged in to reply to this topic.