jQuery UI AutoComplete: Nur ausgewählte Werte aus der Vorschlagsliste zulassen
Lesezeit: 5 Minuten
stephan776
Ich setze um Automatische Vervollständigung der jQuery-Benutzeroberfläche und ich frage mich, ob es eine Möglichkeit gibt, nur eine Auswahl von zuzulassen vorgeschlagene Ergebnisse die zurückgegeben werden, anstatt die Eingabe eines beliebigen Werts in das Textfeld zuzulassen.
Ich verwende dies für ein Tagging-System, ähnlich dem auf dieser Website, daher möchte ich Benutzern nur erlauben, Tags aus einer vorab ausgefüllten Liste auszuwählen, die an das Autocomplete-Plugin zurückgegeben wird.
Der einzige Nachteil, den ich dabei gesehen habe, ist, dass selbst wenn der Benutzer den vollen Wert eines akzeptablen Elements eingibt, wenn er den Fokus vom Textfeld entfernt, der Wert gelöscht wird und er es erneut tun muss. Die einzige Möglichkeit, einen Wert einzugeben, besteht darin, ihn aus der Liste auszuwählen.
Weiß nicht, ob das für dich wichtig ist oder nicht.
Wenn Sie keine IDs, sondern nur Labels verwenden, möchten Sie möglicherweise stattdessen Folgendes verwenden: (innerhalb der Änderungsfunktion) if (!ui.item) { $(this).val(''); }
– Collimarco
25. September 12 um 11:16 Uhr
Wenn Sie ein Element durch Drücken der “Enter”-Taste auswählen, ist ui immer null. jQuery-Benutzeroberfläche v1.11.0
– Asologe
1. August 14 um 14:24 Uhr
Diese Lösung hat bei mir ohne den von Ihnen erwähnten Nebeneffekt funktioniert (der Wert wird gelöscht, wenn der Fokus vom Textfeld verschoben wird). Geprüft mit jQuery Autocomplete v1.8.
– BornToCode
6. August 15 um 13:08 Uhr
@collimarco Sowohl die Antwort als auch dein Kommentar haben wie ein Zauber funktioniert. Ich arbeite wirklich viel besser mit den Tab- und Enter-Tasten.
– ArabianMaiden
23. April 21 um 11:59 Uhr
Sieger
Ich habe das gleiche Problem damit, dass selected nicht definiert ist. Habe eine Problemumgehung dafür und fügte die hinzu toLowerCase funktionieren, nur um sicher zu gehen.
$('#' + 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);
}
}
}
Ich weiß nicht, warum das verlinkte Beispiel die Dinge so kompliziert macht. Diese Version erfordert keine zusätzliche Steuerung und ist ziemlich einfach zu verstehen: jsfiddle.net/jlowery2663/o4n29wn3
– Jeff Lowery
18. November 14 um 21:20 Uhr
Das funktioniert bei mir nicht. select ist undefiniert, und ich vermute, dass input es auch ist. Haben Sie eine Version davon, die tatsächlich getestet wurde?
Ich ändere nur den Code in meinem Fall und es funktioniert
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 : ""));
}
}
Du kannst es versuchen
Versuchen Sie dies, aber alle Werte zeigen null an. Kann nichts auswählen
– webzy
26. April 16 um 18:55 Uhr
DiskJunky
Ajax-Übermittlung und Handhabung
Das wird einigen von euch da draußen von Nutzen sein:
$('#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.');
}
});
}
});
Versuchen Sie dies, aber alle Werte zeigen null an. Kann nichts auswählen
– webzy
26. April 16 um 18:55 Uhr
Pomix
Ich bin auf Drupal 7.38 und um nur Eingaben aus der Auswahlbox in der Autovervollständigung zuzulassen, müssen Sie die Benutzereingabe nur an der Stelle löschen, an der js sie nicht mehr benötigt – was der Fall ist, sobald die Suche- Ergebnisse landen im Vorschlags-Popup, dort können Sie sicher einstellen:
**this.input.value=""**
siehe unten im Auszug aus autocomplete.js … Also habe ich das ganze Drupal.jsAC.prototype.found-Objekt in mein Custom-Modul kopiert und dem gewünschten Formular mit hinzugefügt
Und hier ist der Auszug aus der ursprünglichen misc/autocomplete.js von drupal, modifiziert durch diese einzelne Zeile …
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.
= schneiden. . . . . .
.
6555500cookie-checkjQuery UI AutoComplete: Nur ausgewählte Werte aus der Vorschlagsliste zulassenyes
Siehe auch: stackoverflow.com/a/15704767/5802289
– J0ANMM
16. Juni 17 um 10:12 Uhr