Search Over JqxTree Widget - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: AutoComplete, case sensitive, case-insensitive, expand, expandItem, highlight, item, jqxtree, search, select, selectItem, Tree

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 3 months ago.

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

Author

Search Over JqxTree Widget Posts

May 29, 2014 at 6:28 am Search Over JqxTree Widget #55056

Vivek

Participant

Hi,

I’m using jqxTree Widget and populating it with the help of json data. I want to add one more feature to the tree i.e the SEARCH feature.
I want that if a user enters a string in the textbox then if the jqxTree has same string then it should get expanded till that level.

I searched over net but is there a ready made widget for it ?
If yes, then whats the widget and how to use it.

If No, then is there any work around for this problem.

Please Help me out with this one.

EX:-

>CARS
– Ford
– Honda
– VolksWagon
>BIKES
– KTM
– Royal Enfield
– Ducati

Above is the sample tree with values. If a user enters say ‘KTM’ then following should be the result:-

>CARS
>BIKES
– KTM
– Royal Enfield
– Ducati

Tree expands till KTM and it gets highlighted.

May 29, 2014 at 12:13 pm Search Over JqxTree Widget #55078

Dimitar

Participant

Hello sh.vivek,

Here is the solution:

<!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.10.2.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
            // Create jqxTree
            var source = [
            {
                icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                  { icon: "../../images/calendarIcon.png", label: "Calendar" },
                  { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
            },
            {
                icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                 { icon: "../../images/folder.png", label: "Admin" },
                 { icon: "../../images/folder.png", label: "Corporate" },
                 { icon: "../../images/folder.png", label: "Finance" },
                 { icon: "../../images/folder.png", label: "Other" },
                ]
            },
            { icon: "../../images/recycle.png", label: "Deleted Items" },
            { icon: "../../images/notesIcon.png", label: "Notes" },
            { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
            { icon: "../../images/favorites.png", label: "Favorites" }
            ];

            $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
            $('#jqxTree').jqxTree('selectItem', null);
            $("#search").click(function () {
                $('#jqxTree').jqxTree('collapseAll');
                var items = $('#jqxTree').jqxTree("getItems");
                var searchedValue = $("#searchValue").val();
                for (var i = 0; i < items.length; i++) {
                    if (searchedValue == items[i].label) {
                        $('#jqxTree').jqxTree('expandItem', items[i].parentElement);
                        $('#jqxTree').jqxTree('selectItem', items[i]);
                    }
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div>
        Search:</div>
    <div>
        <input id="searchValue" style="margin-right: 15px;" />
        <button id="search">
            Search</button>
    </div>
    <br />
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id='jqxTree'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 30, 2014 at 8:54 am Search Over JqxTree Widget #55117

Vivek

Participant

Hi Dimitar,

You saved my day..!!! Thank you very much.!!

I just have one doubt that if i have to make the search free from case-senstivity then what can i do..?

i.e Search String—>> Software & software are same while searching.

June 2, 2014 at 4:57 am Search Over JqxTree Widget #55163

Dimitar

Participant

Hi sh.vivek,

You can use the method toLowerCase() to achieve this:

$("#search").click(function () {
    $('#jqxTree').jqxTree('collapseAll');
    var items = $('#jqxTree').jqxTree("getItems");
    var searchedValue = $("#searchValue").val().toLowerCase();
    for (var i = 0; i < items.length; i++) {
        if (searchedValue == items[i].label.toLowerCase()) {
            $('#jqxTree').jqxTree('expandItem', items[i].parentElement);
            $('#jqxTree').jqxTree('selectItem', items[i]);
        }
    };
});

Best Regards,
Dimitar

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

June 2, 2014 at 5:50 am Search Over JqxTree Widget #55166

Vivek

Participant

Hey Dimitar

Thanks a Ton..!!! I have a last query if you will help me out…??

whenever I search the tree displays the result only if i type in the full name. But i want that if the string that i entered is contained in any of the nodes it should display the closest one..!! Like an autocomplete feature.!!

Ex:-

Search String :- ca

Results:-

CAT6K
CAT9k
CALENDAR
———-
The Moment i type :- cal

Results:-

CALENDAR

Thanks in advance man..!!! 🙂 This is the last help i need.. I hope.. 😛

June 2, 2014 at 12:25 pm Search Over JqxTree Widget #55186

Dimitar

Participant

Hi Vivek,

Here is the updated example:

<!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.10.2.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
            // Create jqxTree
            var source = [
            {
                icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                  { icon: "../../images/calendarIcon.png", label: "Calendar" },
                  { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
            },
            {
                icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                 { icon: "../../images/folder.png", label: "Admin" },
                 { icon: "../../images/folder.png", label: "Corporate" },
                 { icon: "../../images/folder.png", label: "Finance" },
                 { icon: "../../images/folder.png", label: "Other" },
                ]
            },
            { icon: "../../images/recycle.png", label: "Deleted Items" },
            { icon: "../../images/notesIcon.png", label: "Notes" },
            { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
            { icon: "../../images/favorites.png", label: "Favorites" }
            ];

            $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
            $('#jqxTree').jqxTree('selectItem', null);

            var foundItem;
            $("#searchValue").keyup(function () {

                var items = $('#jqxTree').jqxTree("getItems");
                var searchedValue = $("#searchValue").val().toLowerCase();
                for (var i = 0; i < items.length; i++) {
                    if (items[i].label.toLowerCase().indexOf(searchedValue) == 0) {
                        if (foundItem != i) {
                            $('#jqxTree').jqxTree('collapseAll');
                        }
                        $('#jqxTree').jqxTree('expandItem', items[i].parentElement);
                        $('#jqxTree').jqxTree('selectItem', items[i]);
                        foundItem = i;
                        break;
                    }
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div>
        Search:</div>
    <div>
        <input id="searchValue" style="margin-right: 15px;" />
    </div>
    <br />
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id='jqxTree'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.