JQuery UI Автозаполнение: разрешать только выбранные из предложенного списка

Я реализую jQuery UI Autocomplete, и мне интересно, есть ли способ разрешить выбор только из предлагаемых результатов, а не разрешать любое значение вводится в текстовое поле.

Я использую это для системы тегов, очень похожей на ту, которая используется на этом сайте, поэтому я хочу, чтобы пользователи могли выбирать теги из предварительно заполненного списка, возвращаемого в плагин автозаполнения.

Ответ 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 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); 
        }
    }
}

Ответ 2

Вы также можете использовать это:

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

Единственный недостаток, который я видел в этом, заключается в том, что даже если пользователь вводит полное значение приемлемого элемента, когда они перемещают фокус с текстового поля, он будет удалять значение, и ему придется сделать это снова. Единственный способ, которым они могли бы ввести значение, - это выбрать его из списка.

Не знаю, имеет ли это значение для вас или нет.

Ответ 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;
    }
});

Ответ 4

Я просто модифицирую код в моем случае, и он работает

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

вы можете попробовать

Ответ 5

Вот как я это сделал со списком поселений:

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

Ответ 6

Я на Drupal 7.38 и разрешить ввод только с помощью select-box в автозаполнении вам нужно только удалить пользовательский ввод в точке, где 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 оригинала 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.

= разрез.,,,

Ответ 7

С помощью простого jQuery используйте событие focusout:

Например:

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

});

Затем: получите текст с помощью $( "#input" ).val() и проверьте, соответствует ли это слово массиву. Если НЕ очистить вход: $( "#input" ).val('');