jQuery UI 自動完成：只允許從建議列表中選擇值

Question

我正在實現jQuery UI 自動完成，並且想知道是否有任何方法只允許從返回的建議結果中進行選擇，而不是允許將任何值輸入到文本框中。

我將它用於標記系統，很像本網站上使用的標記系統，因此我只想允許用戶從返回到自動完成插件的預填充列表中選擇標記。

Answer 1

你也可以使用這個：

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

我看到的唯一缺點是，即使用戶輸入了可接受項目的完整值，當他們從文本字段移動焦點時，它將刪除該值，並且他們將不得不再次執行此操作。 他們能夠輸入值的唯一方法是從列表中選擇它。

不知道這對你來說是否重要。

Answer 2

我遇到了同樣的問題，選擇未定義。 為它找到了解決方法並添加了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 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

Ajax 提交和處理

這對你們中的一些人有用：

$('#INPUT_ID').autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: autocompleteURL,
            data: "{'data':'" + $('INPUT_ID').val() + "'}",
            dataType: 'json',
            success: function (data) {
                response(data.d);
            },
            error: function (data) {
                console.log('No match.')
            }
        });
    },
    change: function (event, ui) {
        var opt = $(this).val();

        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: autocompleteURL,
            data: "{'empName':'" + name + "'}",
            dataType: 'json',
            success: function (data) {
                if (data.d.length == 0) {
                    $('#INPUT_ID').val('');
                    alert('Option must be selected from the list.');
                } else if (data.d[0] != opt) {
                    $('#INPUT_ID').val('');
                    alert('Option must be selected from the list.');
                }
            },
            error: function (data) {
                $(this).val('');
                console.log('Error retrieving options.');
            }
        });
    }
});

Answer 7

我在 drupal 7.38 並且只允許從自動完成中的選擇框輸入你只需要刪除用戶輸入點，js 不再需要它 - 就是這種情況，只要搜索 -結果出現在建議彈出窗口中，您可以保存設置：

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

請參閱下面 autocomplete.js 的摘錄...所以我將整個 Drupal.jsAC.prototype.found 對象復制到我的自定義模塊中，並將其添加到所需的表單中

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

這是由那一行修改的 Drupal 原始 misc/autocomplete.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.

=切。 . . . . .

Answer 8

如果您想限制用戶從自動完成列表中選擇推薦，請嘗試像這樣定義關閉函數。 當結果下拉關閉時調用 close 函數，如果用戶從列表中選擇，則 event.currentTarget 被定義，如果沒有，則結果下拉關閉，用戶不選擇選項。 如果他們沒有選擇一個選項，那么我將輸入重置為空白。

//
// Extend Autocomplete
//
$.widget( "ui.autocomplete", $.ui.autocomplete, {      
   options: {
      close: function( event, ui ) {
         if (typeof event.currentTarget == 'undefined') {
            $(this).val("");
         }
      }
   }
 });

Answer 9

您實際上可以將response事件與更改事件結合使用來存儲建議的項目，如下所示：

response: function (event, ui) {
    var list = ui.content.map(o => o.value.toLowerCase());
},
change: function (event, ui) {
    if (!ui.item && list.indexOf($(this).val().toLowerCase()) === -1 ) { $(this).val(''); 
}