Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Restrict the jqWidgets Combo Box to Value List

I'm developing a web app and I want a combo box with a list of potential values.

Here's some behavior that I want:

  1. I want it to have an arrow on the right that you can click, and you get a drop-down of the different options.
  2. I want it to have a text field where you can type.
  3. I want it to autocomplete for you, so it narrows the list of options as you type.
  4. I want it to select the closest option if you cut off in the middle of typing.
  5. I want it to lock to just the list of options, so that no random values can be sent.

This seems like pretty normal behavior for a widget; I feel like I've seen this in a variety of places--but always incomplete.

I finally came to two options: jQuery UI's Autocomplete widget (extensively modified) or jqWidgets' Combo Box.

The jQuery UI solution seemed like it would require a lot of work, and I liked the look/style of the jqWidgets one better, so I went with that--only to discover that you could not lock the submitted value to the list that you provide. If you select from the drop-down, you get a proper value, but if you type in text it can be whatever you want.

Surely there must be a way, some setting or another, to make the widget lock to the list of values! Nope. I found a thread on the jqWidgets forum where one of the team members says as much:

http://www.jqwidgets.com/community/topic/combobox-with-autocomplete-and-selectable-only-from-the-list/

Now, it's possible that there's some officially-sanctioned way to do it, that this guy didn't know, that I just haven't found, but...I haven't found it. How can I achieve this?

like image 648
Matt Mc Avatar asked Feb 02 '26 14:02

Matt Mc


1 Answers

comboBox.jqxComboBox({selectionMode: "dropDownList"}); could be helpful as well.

like image 156
scripto Avatar answered Feb 05 '26 07:02

scripto



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!