Move filter textbox out of ListBox - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular listbox, external filter, filter, filterable, filtering, Input, jQuery ListBox, jqxListBox, ListBox, textbox

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

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

Author

Move filter textbox out of ListBox Posts

July 24, 2015 at 9:09 am 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

July 24, 2015 at 10:04 am 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/

August 26, 2015 at 7:18 am 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

August 26, 2015 at 7:30 am Move filter textbox out of ListBox #75178

raj

Participant

In addition to that, here the selection is multiple.

August 26, 2015 at 8:14 am 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/

Author

Posts

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

You must be logged in to reply to this topic.