# Does anyone have a good example of a combobox in an Editor config panel?

**URL:** <https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171>\
**Category:** Developing Nodes\
**Tags:** uibuilder\
**Created:** [18 October 2023 20:13 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171 "2023-10-18T20:13:27Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 October 2023 20:13 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/1 "2023-10-18T20:13:27Z")

</div>

The UIBUILDER `uib-element` node has a selectable list of element types & this list is getting rather long now. So I would like to give users a combo box so that they can type a few letters to get to the appropriate element selection.

I've been trying to do this manually using the jQuery UI autocomplete but I can't quite hit the right magic spell. So I was wondering if anyone had a good example that I could examine?

Cheers, J.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [18 October 2023 20:25 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/2 "2023-10-18T20:25:34Z")

</div>

Hi @TotallyInformation

I'm not sure it fits perfectly to what you need, but there is the built in `AutoComplete`.  
you can maybe validate the input to ensure its a valid value?

[https://nodered.org/docs/api/ui/autoComplete/](https://nodered.org/docs/api/ui/autoComplete/)

![Screenshot 2023-10-18 at 21.27.53](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/15954b93d25333a7aa13942564195bb794fc8afb.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 October 2023 20:30 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/3 "2023-10-18T20:30:17Z")

</div>

Hi Marcus, thanks for the response. I looked at that but it is only for input fields. There is an option for TypedInput as well but I can't see a way to combine a drop-down with input text for a proper combobox.

There is an example in the jQuery UI autocomplete docs but I'm failing to get it working inside the Editor. I'm probably missing something obvious which is why I hoped someone would have a working example.

To be clear, I want the dropdown for people who don't know what is available and the autocomplete for people who do.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 October 2023 20:36 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/4 "2023-10-18T20:36:28Z")

</div>

Does [datalist](https://caniuse.com/#search=datalist) not satisfy your need?

https://codepen.io/rogerpence/embed/preview/yXwzQr?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=yXwzQr

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 October 2023 20:49 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/5 "2023-10-18T20:49:08Z")

</div>

Ah, I was maybe too focused on using jQuery UI! 😁

Thanks Steve, I'll have a look at that.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [18 October 2023 20:54 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/6 "2023-10-18T20:54:56Z")

</div>

Plus - seems it should play nice with CSS also

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 October 2023 22:00 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/7 "2023-10-18T22:00:51Z")

</div>

Hmm, well datalist actually doesn't play very nicely with anything! It is actually pretty limited annoyingly. It looks fairly nasty and has limited styling. ☹

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [18 October 2023 22:02 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/8 "2023-10-18T22:02:14Z")

</div>

Datalist is great if you always start with an empty field. Not so good if you want to prepopulate with a previous selection ( as you have to delete to get the drop-down list back)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 October 2023 22:08 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/9 "2023-10-18T22:08:04Z")

</div>

Thanks Dave, that would seem to be the final nail in that one.

It is weird, looking at the W3C Aria examples, the combo box examples are ENORMOUS!

Maybe I need to look at other options - all ideas welcome. 🙂

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 October 2023 22:13 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/10 "2023-10-18T22:13:49Z")

</div>

Yeah it is a bit limited.

In the past I've used [magicsuggest](http://nicolasbize.com/magicsuggest/examples.html) and another I forget the name of (it did fuzzy searching, drop tree and more)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 December 2023 22:14 UTC](https://discourse.nodered.org/t/does-anyone-have-a-good-example-of-a-combobox-in-an-editor-config-panel/82171/11 "2023-12-17T22:14:32Z")

</div>

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