it-swarm.com.de

jQuery UI AutoComplete: Nur ausgewählten Wert aus der vorgeschlagenen Liste zulassen

Ich implementiere jQuery UI Autocomplete und frage mich, ob es eine Möglichkeit gibt, nur eine Auswahl aus den vorgeschlagenen Ergebnissen zuzulassen die zurückgegeben werden, anstatt zuzulassen, dass ein Wert in das Textfeld eingegeben wird.

Ich verwende dies für ein Tagging-System, das dem auf dieser Site verwendeten ähnlich ist. Daher möchte ich Benutzern nur die Auswahl von Tags aus einer vorgefüllten Liste ermöglichen, die an das Autocomplete-Plugin zurückgegeben wird.

40
stephen776

Ich habe das selbe Problem, dass ausgewählt wurde, wurde nicht definiert. Habe eine Problemumgehung und fügte die toLowerCase-Funktion hinzu, um sicherzugehen.

$('#' + 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); 
        }
    }
}
15
Victor

Sie könnten dies auch 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, der Wert gelöscht wird, wenn er den Fokus aus dem Textfeld verschiebt, und er es erneut tun muss. Die einzige Möglichkeit, einen Wert einzugeben, besteht darin, ihn aus der Liste auszuwählen.

Weiß nicht, ob dir das wichtig ist oder nicht.

39
Jason Gray

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;
    }
});
6
Sam Battat

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

6
Amol Shiledar

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

Ajax-Einreichung und Bearbeitung

Dies wird für einige 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.');
            }
        });
    }
});
0
Daniel Forrest

Ich bin auf drupal 7.38 und, um nur die Eingabe von select-box in autocomplete zuzulassen Sie müssen nur die Benutzereingabe an der Stelle löschen, Im Fall Sobald die Suchergebnisse im Suggestion-Popup erscheinen Dort können Sie sicher einstellen: 

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

siehe unten im Auszug aus autocomplete.js ... Also habe ich das gesamte Drupal.jsAC.prototype.found-Objekt in mein benutzerdefiniertes Modul kopiert und mit der gewünschten Form hinzugefügt 

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

Und hier ist der Auszug aus drupals originalemisc/autocomplete.js , Modifiziert durch diese einzige 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. . . . . . 

0
pomix