jQuery UI AutoComplete: Nur ausgewählte Werte aus der Vorschlagsliste zulassen

Lesezeit: 5 Minuten

jQuery UI AutoComplete Nur ausgewahlte Werte aus der Vorschlagsliste zulassen
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.

  • Siehe auch: stackoverflow.com/a/15704767/5802289

    – J0ANMM

    16. Juni 17 um 10:12 Uhr

Sie könnten auch dies verwenden:

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

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

jQuery UI AutoComplete Nur ausgewahlte Werte aus der Vorschlagsliste zulassen
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?

    – B2K

    3. August 15 um 15:11 Uhr

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

  • Ist es eine gültige Verwendung für Formulare, wenn sie in Formularen viele Jquery-Funktionen haben?

    – TarangP

    29. Dezember 17 um 6:08 Uhr


  • Dies funktioniert nicht, wenn Sie eine Teilzeichenfolge eines der zulässigen Elemente eingeben.

    – Anup Sharma

    13. Februar 18 um 13:29 Uhr

So habe ich es mit einer Liste von Siedlungen gemacht:

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

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

1643257266 317 jQuery UI AutoComplete Nur ausgewahlte Werte aus der Vorschlagsliste zulassen
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

1643257266 426 jQuery UI AutoComplete Nur ausgewahlte Werte aus der Vorschlagsliste zulassen
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

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

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. . . . . .

.

655550cookie-checkjQuery UI AutoComplete: Nur ausgewählte Werte aus der Vorschlagsliste zulassen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy