grid auto complete contains search - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: addFilter, applyfilters, custom filter, filter, filter by multiple columns, grid, Input, jqxgrid, multiple columns, toolbar

This topic contains 4 replies, has 3 voices, and was last updated by Dimitar 10 years, 1 month ago.

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

Author

grid auto complete contains search Posts

January 27, 2015 at 7:56 pm grid auto complete contains search #66101

mustafa

Participant

hello how can I do grid auto complete contains search ?
but I do not want columns search
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/saveloadstate.htm

this it’s possible ? thank you
example

January 27, 2015 at 8:06 pm grid auto complete contains search #66104

mustafa

Participant

I look this
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?web
but how can I do localdata filter search ?

January 28, 2015 at 7:18 am grid auto complete contains search #66113

Dimitar

Participant

Hello mustafa,

Here is an example. We hope it is helpful to you:

<!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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
                { countryName: 'Peru', name: 'Lima', population: 7674366, continentCode: 'SA' },
                { countryName: 'Algeria', name: 'Algiers', population: 1977663, continentCode: 'AF' },
                { countryName: 'Ireland', name: 'Dublin', population: 1024027, continentCode: 'EU' }
            ]

            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                async: false,
                localdata: data
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            function addFiter(value) {
                $("#jqxgrid").jqxGrid('clearfilters');
                var filtertype = 'stringfilter';
                var filtergroup = new $.jqx.filter();
                var filter = filtergroup.createfilter('stringfilter', value, 'CONTAINS');
                filtergroup.addfilter(1, filter);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'name', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columns: [
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ],
                showtoolbar: true,
                autoheight: true,
                filterable: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
                    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    toolbar.append(container);
                    container.append(span);
                    container.append(input);
                    if (theme != "") {
                        input.addClass('jqx-widget-content-' + theme);
                        input.addClass('jqx-rc-all-' + theme);
                    }
                    var oldVal = "";
                    input.on('keydown', function (event) {
                        if (input.val().length >= 1) {
                            if (me.timer) {
                                clearTimeout(me.timer);
                            }
                            if (oldVal != input.val()) {
                                me.timer = setTimeout(function () {
                                    addFiter(input.val());
                                }, 1000);
                                oldVal = input.val();
                            }
                        }
                        else {
                            $("#jqxgrid").jqxGrid('clearfilters');
                        }
                    });
                }
            });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxgrid'>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 30, 2015 at 12:03 am grid auto complete contains search #66193

lucasgraf

Participant

I think he wants the same thing I do. Your example above limits it to only the ‘name’ column.

I would like to be able to show that search box but then have it search the entire grid for that text and show all rows, regardless of the column it is found in, that contains that text.

Basically if rows in ColumnA contains searchText OR rows in ColumnB contains searchText OR rows in ColumnC contains searchText then show all those rows.

January 30, 2015 at 5:23 am grid auto complete contains search #66198

Dimitar

Participant

Hello lucasgraf,

In the forum topic Grid filter based on multiple columns is explained how this functionality can be achieved.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.