jQuery UI AutoComplete: Chỉ cho phép đã chọn giá trị từ danh sách gợi ý

Question

Tôi đang thực hiện jQuery UI Autocomplete và đang tự hỏi nếu có cách nào để chỉ cho phép một sự lựa chọn từ gợi ý kết quả được trả về như trái ngược với việc cho phép bất kỳ giá trị để được nhập vào hộp văn bản.

Tôi đang sử dụng tính năng này cho một hệ thống gắn thẻ giống như được sử dụng trên trang web này, vì vậy tôi chỉ muốn cho phép người dùng chọn thẻ từ danh sách được điền trước được trả về plugin tự động hoàn tất.

Answer 1

Tôi gặp vấn đề tương tự với lựa chọn không được xác định. Có một công việc xung quanh cho nó và thêm các chức năng toLowerCase, chỉ để được an toàn.

$('#' + 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

Bạn cũng có thể sử dụng này:

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

Hạn chế duy nhất tôi đã nhìn thấy điều này là ngay cả khi người dùng nhập vào giá trị đầy đủ của một mục chấp nhận được, khi họ di chuyển trọng tâm từ textfield nó sẽ xóa giá trị và họ sẽ phải làm lại. Cách duy nhất họ có thể nhập một giá trị là bằng cách chọn nó từ danh sách.

Không biết điều đó có quan trọng với bạn hay không.

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

Đây là cách tôi đã làm nó với một danh sách các khu định cư:

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

Answer 5

tôi chỉ cần sửa đổi để mã trong trường hợp của tôi & nó làm việc

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

bạn có thể thử

Answer 6

Với đơn giản jQuery, sử dụng sự kiện focusout:

Ví dụ:

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

}); 

Sau đó: thu thập các văn bản với $("#input").val() và kiểm tra xem từ là phù hợp với mảng. Nếu KHÔNG sạch đầu vào: $("#input").val('');

Answer 7

Tôi đang trên drupal 7.38 và để chỉ cho phép đầu vào từ chọn hộp trong autocomplete bạn chỉ cần xóa người sử dụng đầu vào tại thời điểm, nơi js không cần nó nữa - đó là trường hợp, ngay sau khi kết quả tìm kiếm đến trong gợi ý-sổ popup ngay tại đó bạn có thể thiết lập Savely:

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

xem dưới đây trong dịch chiết từ autocomplete.js ... Vì vậy, tôi đã sao chép toàn bộ đối tượng Drupal.jsAC.prototype.found vào mô-đun tùy chỉnh của tôi và thêm nó vào dạng mong muốn với

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

Và đây là các chiết xuất từ ​​gốc drupal của misc/autocomplete.js được sửa đổi bởi một dòng đơn ...

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. 

= cắt. . . . . .