I'm developing a web app and I want a bo 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 autoplete 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 inplete.

I finally came to two options: jQuery UI's Autoplete 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:

/

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?

I'm developing a web app and I want a bo 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 autoplete 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 inplete.

I finally came to two options: jQuery UI's Autoplete 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./munity/topic/bobox-with-autoplete-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?

• javascript
• jquery
• bobox
• autoplete
• widget

Share Improve this question Follow asked Mar 20, 2014 at 23:43 Matt McMatt Mc 9,29766 gold badges5757 silver badges9292 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

So after a number of grueling hours, I made a JS hack that does the trick:

function lockComboBox ($aComboBox, aNullLabel) {

    // TODO: Add the ability to not have a null option...?

    // Set nullOption if it's not.
    if (aNullLabel == null || aNullLabel == '') {
        aNullLabel = 'None'; 
    }

    $aComboBox.jqxComboBox('insertAt', { label: aNullLabel, value: ''}, 0);
    $aComboBox.jqxComboBox({autoComplete: true }); 

    $aComboBox.on('focusout', function (eventargs) {
        var $this = $(this);

        // Items are all items, visible items is the set after filtering during autopletion.
        var items = $this.jqxComboBox('getItems');
        var vItems = $this.jqxComboBox('getVisibleItems');

        // Function to check for 'None' and null out the value if found.
        // Necessary because the bo box will stick the label as the value if the value is null.
        function nullFix (nameAttrib) {
            if ($this.jqxComboBox('val') == aNullLabel) {
                $this.find("input[name^='"+nameAttrib+"']").val('');
                return;
            }
        }

        // Next check to see if the value is 'None'
        var valueMember = $this.jqxComboBox('valueMember');
        nullFix(valueMember);

        // Next check to see if the value is an exact match to one of our items                 
        var valueMember = $this.jqxComboBox('valueMember');
        var value = $this.find("input[name^='"+valueMember+"']").attr("value");  
        for (var i = 0; i < items.length; i++) {
            if (value == items[i].value) {
                $this.jqxComboBox('close');
                $this.jqxComboBox('selectIndex', items[i].index);
                return;
            }
        }

        // Next see if the visible items are less than the total
        if (vItems.length < items.length && vItems.length > 0) {

            // If that's the case, it's been filtered, so take the closest one.
            $this.jqxComboBox('close');
            $this.jqxComboBox('selectItem', vItems[0]);

            // Perform another nullcheck
            nullFix(valueMember);

        } else {

            // Otherwise, clear the selection 
            $this.jqxComboBox('close');
            $this.jqxComboBox('clearSelection');

        }
    });

}

That does the trick. Make your bo box and then call the function on it, like so:

// Create a jqxComboBox with the data adapter
$boBox.jqxComboBox({ source: myAdapter, displayMember: "displayLabels", valueMember: "actualValues", width: 200, height: 25 });
// Lock the bo box to its own values, with null option 'None'
lockComboBox ($boBox, 'None');

It seems to correctly handle the different things that can occur: the box losing focus, or the user selecting from the drop-down, etc. Without a "None" item, there was one behavior quirk that I couldn't fix (it could be difficult to clear out the box) so I added that in. I may need to add something later so that you can lock it to the values, but without a null option.

I hope this is useful to someone down the road. :)

Edit:

This actually has something broken about it; it seems to work the first time when you pick something, but if you focus/blur the field again, it blanks it for some reason. I won't be fixing this because there's a simpler solution in the now-accepted answer.