jQuery UI automatico: solo permettono selezionati per un valore di listino consigliato

Question

Io sono l'attuazione jQuery UI Autocomplete e mi chiedo se non v'è alcun modo per consentire solo una selezione dal suggerito risultati che vengono restituiti al contrario di permettere qualsiasi valore da inserire nella casella di testo.

Lo sto utilizzando per un sistema di tagging molto simile a quello utilizzato su questo sito, quindi voglio solo consentire agli utenti di selezionare tag da un elenco pre-compilato restituito al plugin di completamento automatico.

Answer 1

Ho riscontrato lo stesso problema con selezionato non definito. Ottenuto un aggiramento per questo e aggiunto la funzione toLowerCase, solo per sicurezza.

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

Si potrebbe anche usare questo:

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

L'unico inconveniente che ho visto a questo è che, anche se l'utente inserisce il valore totale di un articolo accettabili, quando si muovono attenzione dal campo di testo cancellerà il valore e dovranno farlo di nuovo. L'unico modo in cui sarebbero in grado di inserire un valore è selezionandolo dall'elenco.

Non so se per te è importante o no.

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

Questo è come ho fatto con una lista di insediamenti:

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

Answer 5

ho appena Modifica per il codice nel mio caso & sta funzionando

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

voi può provare

Answer 6

Con semplice jQuery, utilizzare l'evento focusout:

Ad esempio:

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

}); 

Poi: ottenere il testo con $("#input").val() e controllare se la parola è in conformità con la matrice. Se NON pulire l'ingresso: $("#input").val('');

Answer 7

Sono su Drupal 7.38 e per consentire solo input da select-box in completamento automatico è sufficiente per eliminare l'utente di ingresso nel punto, in cui js non ha bisogno è più - che è il caso, non appena i risultati di ricerca-arrivano nella suggestione-popup proprio lì è possibile impostare savely:

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

vedi sotto nell'estratto dal autocomplete.js ... Quindi ho copiato l'intero oggetto Drupal.jsAC.prototype.found nel mio modulo personalizzato e ha aggiunto alla forma desiderata con

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

Ed ecco l'estratto di Drupal misc/autocomplete originale.js modificata da detta singola linea ...

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. 

= taglio. . . . . .