Question

我有一个组合框，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 Combobox附加到我身上了：

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

当我通过键入和/或选择一个选项来选择一个选项时，“DO SOMETHING ELSE”部分会被触发，因此没有问题。

然而，当我通过删除文本或单击“x”来清除选择（这选择了我的原始组合的第一个选项）时，没有任何内容被触发，所以我无法执行我的“DO SOMETHING”部分功能

如何触发此部分？清除选择时是否可能触发另一个事件？

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

Answer 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");
    })

Answer 2

无法在浏览器中选择空值。因此，从不在空内容上调用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（））似乎都没有自动完成功能，因此无法检测到select的归零。 / p>

Answer 3

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

为此，我必须编辑由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函数，并且在调用此函数时通过向控件添加事件，我们最终有一个位置来执行我们的算法。

希望更多的人可以帮助解决这个小问题。

Answer 4

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

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

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

链中的任何地方。

Answer 5

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

1）你的_createAutocomplete：function（）需要具备以下内容：

.attr( "title", "mytitle" )

使用你想要的任何标题，或设置另一个属性（名称，id等） - 我恰好使用了标题，所以这对我有用。

2）无论你运行什么功能，只需要清除以下内容：

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

（你必须清除它们。）

我需要的是一个表单，其中一个字段是自动填充，字符数最少。有一个添加条目按钮，提交，刷新条目列表并重置表单行以获取其他条目。更干净。

jQuery UI Combobox清除选择事件

5 个答案: