jQuery用戶界面自動完成：只允許選擇的從建議名單

Question

我實現jQuery UI的自動完成，我想知道是否有什麼辦法只允許選擇從建議結果被退回，而不是允許任何價值估值輸入到文本框中。

我使用這個標籤系統非常像這個網站上使用的標籤系統，所以我只想讓用戶從預先填充的列表中選擇標籤返回到自動完成插件。

Answer 1

我得到了同樣的問題，選擇未定義。找到了解決辦法，並添加了toLowerCase函數，以保證安全。

$('#' + specificInput).autocomplete({ 
    create: function() { 
    $(this).data('ui-autocomplete')._renderItem = function (ul, item) { 
     $(ul).addClass('for_' + specificInput); //usefull for multiple autocomplete fields 
     return $('<li data-id = "' + item.id + '">' + item.value + '</li>').appendTo(ul); 
    }; 
    }, 
    change: 
    function(event, ui){ 
     var selfInput = $(this); //stores the input field 
     if (!ui.item) { 
     var writtenItem = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val().toLowerCase()) + "$", "i"), valid = false; 

     $('ul.for_' + specificInput).children("li").each(function() { 
      if($(this).text().toLowerCase().match(writtenItem)) { 
      this.selected = valid = true; 
      selfInput.val($(this).text()); // shows the item's name from the autocomplete 
      selfInput.next('span').text('(Existing)'); 
      selfInput.data('id', $(this).data('id')); 
      return false; 
      } 
     }); 

     if (!valid) { 
      selfInput.next('span').text('(New)'); 
      selfInput.data('id', -1); 
     } 
    } 
} 

Answer 2

您也可以使用此：

change: function(event,ui){ 
    $(this).val((ui.item ? ui.item.id : "")); 
} 

我已經看到了這個唯一的缺點是，即使用戶輸入一個可接受項目的全部價值，當他們從移動焦點textfield它將刪除該值，他們將不得不重做。他們能夠輸入值的唯一方法是從列表中選擇它。

不知道這對你是否重要。

Answer 3

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

Answer 4

這是我如何與結算清單做到了：

$("#settlement").autocomplete({ 
    source:settlements, 
    change: function(event, ui) { 
    val = $(this).val(); 
    exists = $.inArray(val,settlements); 
    if (exists<0) { 
    $(this).val(""); 
    return false; 
    } 
} 
}); 

Answer 5

我只是修改代碼在我的情況&它的工作

selectFirst: true, 
change: function (event, ui) { 
     if (ui.item == null){ 
     //here is null if entered value is not match in suggestion list 
      $(this).val((ui.item ? ui.item.id : "")); 
     } 
    } 

你可以試試

Answer 6

隨着簡單的jQuery，使用事件focusout：

例如：

$("#input").focusout(function(){ 

}); 

然後：獲得與$("#input").val() 文本並檢查字是否是按照該陣列。 如果不乾淨的輸入：$("#input").val('');

Answer 7

我在Drupal的7.38和 只允許在自動完成 你只需要在點刪除用戶輸入從選擇框輸入， JS那裏不需要它了 - 這隻要在搜索結果中的建議，彈出 到達那裏，你可以savely設置是這樣的， ：

**this.input.value = ''** 

見下文從autocomplete.js提取物... 所以我複製了整個Drupal.jsAC.prototype.found對象 到我的自定義模塊，將其添加到所需形式 與

$form['#attached']['js'][] = array(
    'type' => 'file', 
    'data' => 'sites/all/modules/<modulname>_autocomplete.js', 
); 

下面是從Drupal的原始雜項/自動完成的提取物。js 被該單線修改...

Drupal.jsAC.prototype.found = function (matches) { 
    // If no value in the textfield, do not show the popup. 
    if (!this.input.value.length) { 
    return false; 
    } 
    // === just added one single line below === 
    this.input.value = ''; 

    // Prepare matches. 

= cut。 。 。 。 。 。