Searchable dropdown (Single selection) widget in Knime

Node Development
1

Hi folks,

I am hoping to find a way to implement searchable drop down in the KNIME UI.

We can simply use Single selection/ Value selection widget for dropdown. But it allows you only to select. We would not be able to search from the dropdown. This becomes a pain when we have thousands of options to select from.
If we get an inbuilt option of enabling a search option in select widgets in KNIME, it will be of great use.

I also tried to implement the same using jQuery plugins like Select2 and Chosen. But I am unsuccessful in it with errors.
If anyone has experience with using external plugins in Generic JavaScript View, please do help me with how to implement it.

2

Hey @roohith007,
we are currently working on a combobox widget, which will allow you to have a searchable dropdown in KNIME. I can’t promise any dates yet, but it will likely make it into the summer release.

Until then building it yourself is probably the only way you have. What have you already tried with the Generic JavaScript View? Is there any particular problem you are facing?

Greetings,
Daniel

1 Like
3

Hi Daniel,

Thanks for the update. Surely looking forward to it.

And regarding the JS node. I am not a JS expert, but all I was trying was to implement something simple as the following:

<html>
	<head>
		<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
	</script>

		<script src= "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">
	</script>
		<link rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
		<script>
			$(document).ready(function () {
				$(".country").select2({
					maximumSelectionLength: 2,
				});
			});
		</script>
	</head>
	<body>
		<form>
			<h4>Selections using Select2</h4>
			<select class="country"
					multiple="true"
					style="width: 200px;">
				<option value="1">India</option>
				<option value="2">Japan</option>
				<option value="3">France</option>
			</select>
		</form>
	</body>
</html>

This basically should enable searchable drop down. I am not sure how to implement this in KNIME.
You can refer this for details regarding the api : Basic usage | Select2 - The jQuery replacement for select boxes

I am trying to achieve a searchable dropdown selection for a column in my table.
Example:

image
image903×251 7.42 KB

If anyone has done it, please guide me through it. Thank you !!

4

Hey @roohith007,
sorry for the late reply.
I couldn’t get it to work with select2, but it works with chosen. Here is the workflow I used. Hope that helps and soon you hopefully don’t need custom JS anymore.

chosenExample.knar.knwf (21.4 KB)

Greetings,
Daniel

1 Like
5

Hi @DanielBog ,

Thanks for the reply. It was helpful. But I am just not able to figure out what goes wrong when I add an event listener to the paired with Chosen.

Attached a sample workflow of what I am trying to achieve. I am able to get the selected value with regular select but not with the one paired with Chosen.

image
image872×549 24.3 KB

SearchableSelectTest.knwf (41.3 KB)

Please do let me know if you find what I am doing wrong or what is the issue. Thank you!

6

Hey @roohith007,
the problem is that the api for value changes for chosen is a bit different.
See the attached example for details.

SearchableSelectTest.knar.knwf (29.5 KB)

Greetings,
Daniel

1 Like
7

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.