僅在jQuery UI自動填充插件中僅允許使用值

是否可以將用戶輸入限制爲僅使用JQuery autocomplete plugin的源值？僅在jQuery UI自動填充插件中僅允許使用值

例如，如果源數組包含"Bold","Normal","Default","100","200"，則允許用戶只鍵入這些值。

來源

2011-06-16 Omar

對於「怪異」問題感到抱歉，但爲什麼不選擇一個選擇框呢？ – Dementic 2011-06-16 14:28:38

我想要一個很好的外觀和感覺。我覺得這很有吸引力 – Omar 2011-06-16 14:35:41

好吧，想一個很好看的車，你必須反向開車.... 你會買它嗎？我不這麼認爲，因爲你會因倒車而感到惱火...... – Dementic 2011-06-16 14:37:19

我看到你已經有了一個解決方案。這裏有一個類似的方法來做到這一點，因爲我已經放了一些時間。

http://jsfiddle.net/pxfunc/j3AN7/

var validOptions = ["Bold", "Normal", "Default", "100", "200"] 
previousValue = ""; 

$('#ac').autocomplete({ 
    autoFocus: true, 
    source: validOptions 
}).keyup(function() { 
    var isValid = false; 
    for (i in validOptions) { 
     if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) { 
      isValid = true; 
     } 
    } 
    if (!isValid) { 
     this.value = previousValue 
    } else { 
     previousValue = this.value; 
    } 
});

來源

2011-06-16 15:46:53 MikeM

我更喜歡您的解決方案，因爲它適用於每個按鍵。它可以更快地給用戶提供反饋。 – Omar 2011-06-16 15:54:18

如果輸入簡單地失去焦點（例如通過在輸入外部左擊），那麼會發生什麼情況，那麼該值將不會被糾正。所以，它也需要'onblur'處理程序來糾正值。 – lolotron 2012-10-24 10:05:09

在'isValid = true;'for for循環後加'break;'。一旦設置爲true，則不需要進一步迭代 – lolotron 2016-03-24 12:37:27

我同意Rephael所做的評論，因爲您想限制自動填充中可能的值，更安全的選擇是選擇下拉菜單。因爲最終用戶可能會在文本框中輸入數據而無法寫入我想要的內容時感到沮喪。選擇下拉菜單的選擇「被社會接受」是有限的。

來源

2011-06-16 14:32:50 Mauro

答案與問題的意見完成。 – Mauro 2011-06-16 15:16:23

我想出了一個辦法。

將以下選項添加到插件。這適用於源是數組的情況。

change: function (event, ui) { 
     if (!ui.item) { 
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), 
            valid = false; 

     $.each(YOUR_SOURCE_ARRAY_NAME, function (index, value) { 
       if (value.match(matcher)) { 
       this.selected = valid = true; 
        return false; 
       } 
      }); 
      if (!valid) { 
       // remove invalid value, as it didn't match anything 
       $(this).val(""); 
      return false; 
      } 
     } 
}

來源

2011-06-16 15:39:59 Omar

我有一個簡單的選擇。檢查了這一點：

http://jsfiddle.net/uwR3Z/2/

基本上在文本框的onChange事件以清除值的工作原理相同。

這裏是JS：

var validOptions = ["Bold", "Normal", "Default", "100", "200"]; 

$('#auto-complete-input').autocomplete({ 
    autoFocus: true, 
    source: validOptions 
}); 

function clearAutoCompleteInput() { 
    $("#auto-complete-input").val(''); 
}

和HTML：

<label for="auto-complete-input">Select one: </label> 
<input id="auto-complete-input" type="text" onChange="clearAutoCompleteInput()" />

來源

2012-08-13 15:41:19 Anand

請在此處發佈您的代碼，而不僅僅是鏈接。 – 2012-08-13 15:51:26

這是一個老問題，但我什麼，我要做的就是

進入時設置的標誌設置爲false字段（onfocus）
將自動完成選擇中的標誌設置爲true即使t
在字段onblur事件中測試該標誌。

如果它是真的，輸入是好的，否則它是壞的。

來源

2013-11-23 14:34:15

僅在jQuery UI自動填充插件中僅允許使用值

回答

相關問題