Listbox filter select item

[dan123Participant]

Hi i am using the listbox widgets with filtering and trying to figure out a way to as user types in the filterbox it would select the item and update the content panel on the right.

The jsfiddle below is based off the demo example https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/index.htm#demos/jqxlistbox/rendering.htm

Output trying to achieve:
1. User types ‘Janet’ in filter
2. The item ‘Janet’ gets selected
3. The ‘Content Panel’ on the right gets updated too.

Here is my jsfiddle:
http://jsfiddle.net/8khqv/189/

[MartinParticipant]

Hello dan123,

In your example, in the keyup event handler you use the listbox’ getItemByValue and pass it the typed input.
However, the value in your case is the row’s “notes” property, so item and item2 will never match if you type the name.

Also, when you filter and use selectIndex or updatePanel() you should pass the initial data index and not 0.

I have updated the Example, to update the panel with the filtered and selected record.

Best Regards,
Martin

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

[dan123Participant]

Hi Martin,

Sorry but your updated example is not working. It doesn’t filter and select the record.

[MartinParticipant]

Hello dan123,

You can still use $("#listbox").jqxListBox('selectIndex', 0); in the keyup event handler to select the typed record but as I said your check if the input matches the name is incorrect as getItemByValue expects the valueMember of the item. You need to change this logic.
Please, check this Example.

Best Regards,
Martin

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

[Author]

Posts