Question

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

这是我想要的一些行为：

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

这似乎是小部件非常正常的行为;我觉得我已经在各种各样的地方看到了这一点 - 但总是不完整的。

我最终选择了两个选项：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/

现在，可能有一些官方认可的方式，这个人不知道，我还没找到，但......我还没有找到它。我怎样才能做到这一点？

Answer 1

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

Answer 2

因此经过一段艰苦的工作时间后，我制作了一个可以解决问题的JS黑客攻击：

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选项。

我希望这对后来的人有用。：）

编辑：

这实际上已经破坏了它;当你选择一些东西时，它似乎第一次工作，但如果你再次聚焦/模糊场，它会因某种原因而空白。我不会解决这个问题，因为在现在接受的答案中有一个更简单的解决方案。

将jqWidgets组合框限制为值列表

2 个答案: