将 jqWidgets 组合框限制为值列表答案

【问题标题】：Restrict the jqWidgets Combo Box to Value List将 jqWidgets 组合框限制为值列表
【发布时间】：2014-04-28 03:41:30
【问题描述】：

我正在开发一个网络应用程序，我想要一个包含潜在值列表的组合框。

这是我想要的一些行为：

我希望它的右侧有一个箭头，您可以单击它，然后您会看到不同选项的下拉菜单。
我希望它有一个可以输入的文本字段。
我希望它为您自动完成，因此它会在您键入时缩小选项列表。
如果您在输入过程中中断，我希望它选择最接近的选项。
我希望它只锁定选项列表，这样就不能发送随机值。

对于小部件来说，这似乎是很正常的行为；我觉得我在很多地方都看到过这种情况——但总是不完整的。

我最终想到了两个选择：jQuery UI's Autocomplete widget（广泛修改）或jqWidgets' Combo Box。

jQuery UI 解决方案似乎需要做很多工作，而我更喜欢 jqWidgets 的外观/样式，所以我选择了它——只是发现您无法将提交的值锁定到您提供的清单。如果您从下拉列表中选择，您会得到一个正确的值，但如果您输入文本，它可以是您想要的任何值。

肯定有办法，某种设置或其他，使小部件锁定到值列表！没有。我在 jqWidgets 论坛上找到了一个帖子，其中一位团队成员说了这么多：

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

现在，可能有一些官方认可的方法可以做到这一点，这家伙不知道，我只是没有找到，但是......我还没有找到。我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery combobox autocomplete widget

【解决方案1】：

comboBox.jqxComboBox({selectionMode: "dropDownList"}); 也会有所帮助。

【讨论】：

根据官方网站，这不是他们的 API 中的一个选项，这里：jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/… 需要解释一下吗？
如果你愿意，试试吧。这是你的选择。
令人着迷。该设置根本不在他们的 API 中，或者在我可以看到的任何示例中，但是当我美化 JS 文件并搜索它时，我确实看到了该设置以及与之相关的行为。谢谢！

【解决方案2】：

因此，经过数小时的艰苦努力，我做了一个 JS hack 来解决问题：

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 autocompletion.
        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 combo 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');

        }
    });

}

这就是诀窍。制作您的组合框，然后在其上调用函数，如下所示：

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

它似乎可以正确处理可能发生的不同情况：框失去焦点，或用户从下拉列表中进行选择等。没有“无”项，我无法修复一个行为怪癖（可能很难清除该框）所以我添加了它。我可能需要稍后添加一些内容，以便您可以将其锁定为值，但没有 null 选项。

我希望这对以后的人有用。 :)

编辑：

这实际上是有问题的；当您第一次选择某些东西时，它似乎可以工作，但是如果您再次聚焦/模糊该字段，它会由于某种原因使其空白。我不会解决这个问题，因为现在接受的答案中有一个更简单的解决方案。

【讨论】：