jQuery UI Widgets Forums Navigation Tree Search Over JqxTree Widget

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • 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.

    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/

    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.

    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/

    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.. 😛

    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/

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

You must be logged in to reply to this topic.