jQuery UI Combobox 清除选择事件答案

【问题标题】：jQuery UI Combobox clear selection eventjQuery UI Combobox 清除选择事件
【发布时间】：2014-02-12 11:13:39
【问题描述】：

我有一个 HTML 看起来像这样的组合框：

<select id="myCombo">
  <option value=""></option> <!-- Not shown in jQuery UI Combobox because empty value -->
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

我已将 jQuery UI 组合框附加到 I 上：

$("#myCombo").combobox({
    select: function () {
        if ($("#myCombo").val() == "") {
            //DO SOMETHING
        }
        else {
            //DO SOMETHING ELSE
        }
    }
});

当我通过键入和/或选择一个选项来选择一个选项时，“做其他事情”部分会按原样触发，所以没有问题。

但是，当我通过删除文本或单击“x”来清除选择（这选择了我原来的组合的第一个选项）时，什么都没有触发，所以我无法执行我的“做某事”部分功能。

如何触发这部分？清除选择时是否会触发另一个事件？

我已经搜索并发现了很多关于选择项目的主题，但没有关于清除/取消选择某些内容的主题（至少得到了回答）。

【问题讨论】：

标签： javascript jquery jquery-ui combobox

【解决方案1】：

这可以通过select2 来完成。

$("#myCombo").select2({
    placeholder: "Select report type",
    allowClear: true,
});
$("#myCombo")
    .on("select2-selecting", function(e) {
        log("selecting val=" + e.val + " choice=" + JSON.stringify(e.choice));
    })
    .on("select2-removed",   function(e) {
        log("removed");
    })

【讨论】：

这正是我想要的：+1
我没有在这种情况下使用它，但简单地看一下，它包含一些有趣的功能，这些功能将在路上有所帮助。将进一步研究它，谢谢。

【解决方案2】：

在进一步研究之后，我找到了一种在清除文本时触发事件的方法。

为此，我必须编辑 example on the jQuery UI site 提供的原始 custom.combobox 小部件 JS

在这个 js 中查找 _removeIfInvalid 函数并像这样编辑它

_removeIfInvalid: function (event, ui) {

        // Selected an item, nothing to do
        if (ui.item) {
            return;
        }

        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children("option").each(function () {
            if ($(this).text().toLowerCase() === valueLowerCase) {
                this.selected = valid = true;
                return false;
            }
        });

        // Found a match, nothing to do
        if (valid) {

            //**ADD this piece of code**
            this._trigger("change", event, {
                item: null
            });

            return;
        }

        // Remove invalid value
        this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
        this.element.val("");
        this._delay(function () {
            this.input.tooltip("close").attr("title", "");
        }, 2500);
        this.input.data("ui-autocomplete").term = "";

        //**ADD this piece of code**
        this._trigger("change", event, {
            item: null
        });

    }

添加的一段代码（我知道它被添加了 2 次，但是代码会在运行之前跳出函数），将向组合框添加一个更改事件，可以在您自己的脚本中使用。此更改事件，我可以在清除选择时使用我想要的任何代码。

$("#myCombo").combobox({
    select: function () {
        //DO SOMETHING ON SELECT

        //IMPORTANT: The other function can't be triggered before the combobox loses focus!!
        $(".custom-combobox-input").blur();
    },
    change:function () {
        //DO SOMETHING ON CLEAR
    }
});

当找不到选项时，默认情况下总是调用 removeIfInvalid 函数，并在调用此函数时向控件添加事件，我们终于有了执行算法的地方。

希望这个小修复可以帮助更多的人。

【讨论】：

【解决方案3】：

无法在浏览器中选择空值。因此 select() 永远不会在空内容上调用。

如果你试试这个，它会变得更清楚一点：

<select id="myCombo">
    <option value=""></option> <!-- Not shown in jQuery UI Combobox because empty value -->
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4"></option>
    <option value="5">Option 5</option>
</select>

我稍微修改了 javascript，注意我是空的永远不会被记录。

$("#myCombo").combobox({
    select: function(event, ui) {
        var idx = $("#myCombo").val();
        var txt = $("#myCombo option:selected").text();
        alert(idx);
        if (idx === undefined) {
            console.log("select: I'm empty");
        } else {
            console.log("select: " + idx + ": " + txt);
        }
    }
});

有趣的是，其他回调（search()、change()、response()、focus()）似乎都无法通过自动完成功能发挥作用，因此无法检测到选择的归零。

【讨论】：

【解决方案4】：

我花了很多时间尝试为此提出的解决方案，但这些解决方案对我不起作用，然后我自己解决了。

查找您创建组合框实例的_createAutocomplete 函数。查找设置为this.input 的属性链。然后添加

.on("focus",function(){
     $(this).val('');
})

链中的任何地方。

【讨论】：

【解决方案5】：

所以这里有很多关于如何做到这一点的例子，但它们（我认为）都很麻烦。您可以通过执行以下操作更轻松地清除选择：

1) 您的 _createAutocomplete: function() 需要具备以下条件：

.attr( "title", "mytitle" )

使用您想要的任何标题，或设置其他属性（名称、id 等）- 我只是碰巧使用了标题，所以这对我有用。

2) 无论您正在运行什么功能，只需要清除以下内容：

$("input[title='mytitle']").val('');
$("#combobox").val('');

（你必须清除两者）。

我需要一个表单，其中一个字段是具有最少字符数的自动完成功能。有一个添加条目按钮，用于提交、刷新条目列表并重置表单行以获取其他条目。干净多了。

【讨论】：