jQuery UI的組合框清晰評選活動

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組合框我這樣：

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

當我通過鍵入和/或選擇一個選項來選擇一個選項，「DO SOMETHING ELSE」部分被觸發，所以沒有問題。

但是，當我通過刪除文本或單擊「x」來清除選擇（這將選擇我的原始組合的第一個選項）時，不會觸發，因此無法執行「DO SOMETHING」的「DO SOMETHING」部分我的功能。

如何觸發此部分？清除選擇時可能會觸發另一個事件嗎？

我已經搜索並找到很多關於選擇項目的主題，但是沒有關於清除/取消選擇某些內容（至少已被回答）。

Answer 1

經過深入研究，我找到了一種在清除文本時觸發事件的方法。

爲此，我不得不修改原來的custom.combobox部件JS，由example on the jQuery UI site

在此提供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功能總是被默認調用時，無法找到一個選項，並通過調用這個函數被調用時添加事件的控制，我們終於要執行我們的algorithmns的地方。

希望有更多的人能夠接受這個小小的修補。

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

有趣的是，沒有任何其他的回調（搜索（），改變（），響應（），焦點（））似乎從自動填充運行，所以沒有辦法檢測一個零-ING出的選擇。

Answer 3

這可以用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 4

我花了很多時間嘗試爲此提出的解決方案，這些都不適合我，然後我自己解決了。

查找您創建組合框實例的_createAutocomplete函數。 查找設置爲this.input的屬性鏈。 然後添加

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

任何地方在鏈中。

Answer 5

所以這裏有很多例子來說明如何做到這一點，但他們都是（我的意見）繁瑣。您可以清除選擇通過執行以下操作非常容易：

1）您_createAutocomplete：（）函數需要具備以下條件：

.attr("title", "mytitle") 

使用任何你想要的標題，或者設置其他屬性（名，ID等） - 我只是碰巧有一個標題的用法，所以這對我有用。

2）任何功能，您正在運行只需要以下明確：

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

（你要清楚這兩種）。

我的需求是一種形式，其中一個字段是具有最少字符數的自動完成字段。有一個添加條目按鈕提交，刷新條目列表並重置表單行以獲取更多條目。更乾淨。