2012-07-18 20 views
0

我使用的代碼爲this comboboxjQuery組合框破解自定義輸入

我以爲我會通過評論這部分,這將允許文本輸入超越不匹配的查詢浮油。

/*Commented out to allow user input 
if (!valid) { 
    remove invalid value, as it didn't match anything 
    $(this).val(""); 
    select.val(""); 
    input.data("autocomplete").term = ""; 
    return false; 
}*/ 

我遇到的問題是我在驗證JS中的表單時無法獲取該值。關於如何做到這一點的任何想法?

回答

1

所以我解決了這個問題。我創建了一個隱藏變量:

<input id="EnterYourOwnValue" type="hidden" value="Enter New... or Select" /> 

然後我編輯的jQuery的組合的一部分,以節省鍵入EnterYourOwnValue值:

      if (!valid) { 
           $("#EnterYourOwnValue").val($(this).val()); 
           /*Commented out to allow user input 
           //remove invalid value, as it didn't match anything 
           $(this).val(""); 
           select.val(""); 
           input.data("autocomplete").term = ""; 
           return false; 
           */ 
          } 

或將所選值到它:

     select: function (event, ui) { 
          $("#EnterYourOwnValue").val(ui.item.option.value); 
         ui.item.option.selected = true; 
         self._trigger("selected", event, { 
          item: ui.item.option 
         }); 

現在自動完成組合框被黑客攻擊成爲一個選擇或在一個框中輸入自己的值!

+0

選擇包含自定義輸入的框。我希望在搜索中使用註釋,以便人們可以在搜索中找到它;我知道我找了好幾個小時才找到我編輯的組合框 – user1329307 2012-07-19 14:47:38

0

用了很多年,試圖讓它與多個組合框一起工作。

得到這一職位有多個組合框的工作,我必須補充一點:

if($(select).attr('name') == YourComboBoxName) $("#EnterYourOwnValue").val($(this).val())

1

你爲什麼不只是添加了「無效」輸入選擇元素的這樣

結束
if (!valid) { 
    select.append('<option>' + $(element).val() + '</option>'); //Add the new option 
    select.val($(element).val()); //select the new option 
} 

這是永遠只相關的,如果你在你的選擇

我發現你的代碼,而使用搜索連勝文值爲這個答案,但在閱讀你的答案意識到我必須做的。

0

這是爲我做多組合框

當然,我不得不做出一個隱藏的輸入以及工作時。

var thisinput = this.element.attr("name"); 
var value = this.input.val(); 

    if(thisinput == "YourComboBoxName"){ 
    $("#EnterYourOwnValue").val(value); 
    } 
2

自發布並回答此問題後,JQuery UI組合框的代碼已被修改。問題中提供的鏈接仍然有效,但代碼與本主題中討論的代碼不同。

下面是對於新的組合框代碼(截至9/2/15)的修復,其工作方式與Peter的方法相似。

首先刪除該塊,以防止被刪除的自定義值:

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.autocomplete("instance").term = ""; 

替換該塊的自定義值添加爲選擇選項並將其設置爲當前值:

this.element.append('<option>' + this.input.val() + '</option>'); //Add the new option 
this.element.val(this.input.val()); //select the new option 
+0

非常好,謝謝。作品一種享受。 – bgx 2016-04-29 13:31:41