jQuery UI Widgets Forums Lists ListBox Move filter textbox out of ListBox

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 8 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Move filter textbox out of ListBox #74118

    raj
    Participant

    Hi,

    I’m building a multi-select component where I move items for ListBox A to ListBox B and vice versa using the following buttons,


    > – Move Selected
    >> – Move All to Selected
    < – Move Selected
    << – Move All to Available

    Along with this, I need to implement filter textbox on top of ListBox A for filtering.
    Note: That filter textbox is only applicable for ListBox A

    I saw a jqxListBox API which has the property “filterable:true” but textbox is rendering inside the listbox.

    is it possible to move the filter textbox out of listbox?
    or
    is it possible to keep one textbox out of listbox and provide relationship or mapping between them for filtering?

    Can someone provide me a solution?

    Thanks in advance,
    Raj

    Move filter textbox out of ListBox #74120

    Dimitar
    Participant

    Hi Raj,

    Here is an example of the second option. We hope it is useful 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="../../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/jqxlistbox.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte",
                        "Caffé macchiato",
                        "Café mélange",
                        "Coffee milk",
                        "Cafe mocha",
                        "Cappuccino",
                        "Carajillo",
                        "Cortado",
                        "Cuban espresso",
                        "Espresso",
                        "Eiskaffee",
                        "The Flat White",
                        "Frappuccino",
                        "Galao",
                        "Greek frappé coffee",
                        "Iced Coffee",
                        "Indian filter coffee",
                        "Instant coffee",
                        "Irish coffee",
                        "Liqueur coffee"
    		        ];
    
                    // Create a jqxListBox
                    $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250 });
    
                    $('#filterTextbox').keyup(function (event) {
                        var value = event.target.value,
                            filteredSource = [],
                            selectedItem = $("#jqxWidget").jqxListBox('getSelectedItem');
    
                        for (var i = 0; i < source.length; i++) {
                            if (source[i].toLowerCase().indexOf(value.toLowerCase()) !== -1) {
                                filteredSource.push(source[i]);
                            }
                        }
    
                        $("#jqxWidget").jqxListBox({ source: filteredSource });
    
                        if (selectedItem && filteredSource.indexOf(selectedItem.label) !== -1) {
                            var newSelectedItem = $("#jqxWidget").jqxListBox('getItemByValue', selectedItem.label);
                            $("#jqxWidget").jqxListBox('selectItem', newSelectedItem);
                        }
                    });
                });
            </script>
            <input id="filterTextbox" type="text" />
            <br />
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Move filter textbox out of ListBox #75176

    raj
    Participant

    Hi Dimitar,

    Thanks for your wonderful solution.

    I tried your code snippet and it is working fine as expected but I noticed that, the selection is disappearing after filtering but the built-in filter textbox is retaining the selected items.

    I hope the provided IF condition suppose to do but it is not working as expected,

    $('#filterTextbox').keyup(function (event) {
    	var value = event.target.value,
    		filteredSource = [],
    		selectedItem = $("#jqxWidget").jqxListBox('getSelectedItem');
    
    	for (var i = 0; i < source.length; i++) {
    		if (source[i].toLowerCase().indexOf(value.toLowerCase()) !== -1) {
    			filteredSource.push(source[i]);
    		}
    	}
    
    	$("#jqxWidget").jqxListBox({ source: filteredSource });
    
    	if (selectedItem && filteredSource.indexOf(selectedItem.label) !== -1) {
    		var newSelectedItem = $("#jqxWidget").jqxListBox('getItemByValue', selectedItem.label);
    		$("#jqxWidget").jqxListBox('selectItem', newSelectedItem);
    	}
    });

    Can you explain me the above highlighted IF condition logic & suggest me a solution for my request?

    Looking forward.

    Thanks,
    Raj

    • This reply was modified 8 years, 7 months ago by  raj.
    Move filter textbox out of ListBox #75178

    raj
    Participant

    In addition to that, here the selection is multiple.

    Move filter textbox out of ListBox #75180

    Dimitar
    Participant

    Hi Raj,

    Here is how to retain selection after filtering:

    <!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="../../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/jqxlistbox.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte",
                        "Caffé macchiato",
                        "Café mélange",
                        "Coffee milk",
                        "Cafe mocha",
                        "Cappuccino",
                        "Carajillo",
                        "Cortado",
                        "Cuban espresso",
                        "Espresso",
                        "Eiskaffee",
                        "The Flat White",
                        "Frappuccino",
                        "Galao",
                        "Greek frappé coffee",
                        "Iced Coffee",
                        "Indian filter coffee",
                        "Instant coffee",
                        "Irish coffee",
                        "Liqueur coffee"
    		        ];
    
                    // Create a jqxListBox
                    $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250 });
    
                    var selectedItem;
    
                    $('#filterTextbox').keyup(function (event) {
                        var value = event.target.value,
                            filteredSource = [],
                            currentSelectedItem = $("#jqxWidget").jqxListBox('getSelectedItem');
    
                        if (currentSelectedItem) {
                            selectedItem = currentSelectedItem;
                        }
    
                        for (var i = 0; i < source.length; i++) {
                            if (source[i].toLowerCase().indexOf(value.toLowerCase()) !== -1) {
                                filteredSource.push(source[i]);
                            }
                        }
    
                        $("#jqxWidget").jqxListBox({ source: filteredSource });
    
                        if (selectedItem && filteredSource.indexOf(selectedItem.label) !== -1) {
                            var newSelectedItem = $("#jqxWidget").jqxListBox('getItemByValue', selectedItem.label);
                            if (newSelectedItem) {
                                $("#jqxWidget").jqxListBox('selectItem', newSelectedItem);
                            }
                        }
                    });
                });
            </script>
            <input id="filterTextbox" type="text" />
            <br />
            <div id='jqxWidget'>
            </div>
        </div>
    </body>
    </html>

    If you want multiple item selection, you should make use of the method getSelectedItems.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.