jQuery UI autouzupełniania: tylko pozwoli wybranych ceniony od sugerowanej listy

Question

Jestem wykonawczych jQuery UI autouzupełniania i zastanawiam się czy jest jakiś sposób, aby umożliwić jedynie wybór z sugerowane wyniki, które są zwracane w przeciwieństwie do pozwalając żadnej wartości do wprowadzenia do pola tekstowego.

Używam tego dla systemu oznaczania podobnego do tego używanego w tej witrynie, więc chcę zezwolić użytkownikom na wybór tagów z wstępnie wypełnionej listy zwróconej do wtyczki autouzupełniania.

Answer 1

Mam ten sam problem z wybranymi nie zdefiniowanymi. Mam do tego obejście i dodałem funkcję toLowerCase, aby być bezpiecznym.

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

Można też użyć tego:

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

Jedyną wadą widziałem jest to, że nawet jeśli użytkownik wprowadzi pełną wartość dopuszczalnego elementu, gdy przenieść fokus z textfield usunie wartość i będą musieli zrobić to ponownie. Jedynym sposobem na wprowadzenie wartości jest wybranie jej z listy.

Nie wiem, czy to ma znaczenie dla Ciebie, czy nie.

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

To jak to zrobiłem z listą osiedli:

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

Answer 5

Właśnie modyfikacji do kodu w moim przypadku & to działa

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

ty może spróbować

Answer 6

Z prostego jQuery użyć zdarzenia focusout:

na przykład:

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

}); 

Następnie: uzyskać tekst z $("#input").val() i sprawdzić, czy słowo jest zgodne z tablicy. jeśli nie czyścić wejście: $("#input").val('');

Answer 7

jestem na drupal 7,38 i aby umożliwić wejście tylko od wybranej skrzynki w autouzupełniania trzeba tylko usunąć wejściowe użytkownika w miejscu, gdzie js nie potrzebuje to dłużej - co jest, jak najszybciej z wyszukiwarki wyniki przyjeździe sugestia-popup tam można savely set:

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

patrz niżej w ekstrakcie z autocomplete.js ... Skopiowałem więc cały obiekt Drupal.jsAC.prototype.found do mojego modułu niestandardowej i dodaje je do pożądanej postaci z

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

A oto fragment oryginalnej Drupal misc/autouzupełnianie.js zmodyfikowany przez tę jednej linii ...

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. 

= cięcie. . . . . .