Dropdown-Liste 2 auswählen, aber neue Werte vom Benutzer zulassen?

Ich möchte eine Dropdown-Liste mit einer Reihe von Werten haben, aber dem Benutzer auch erlauben, einen neuen Wert "auszuwählen", der dort nicht aufgeführt ist.

Ich sehe, dass select2 dies unterstützt, wenn Sie es im tagsModus verwenden, aber gibt es eine Möglichkeit, dies ohne Verwendung von Tags zu tun?

Für Version 4+ überprüfen Sie diese Antwort unten von Kevin Brown

In Select2 3.5.2 und darunter können Sie Folgendes verwenden:

$(selector).select2({
  minimumInputLength:1,
  "ajax": {
    data:function (term, page) {
      return { term:term, page:page };
    },
    dataType:"json",
    quietMillis:100,
    results: function (data, page) {
      return {results: data.results};
    },
    "url": url
  },
  id: function(object) {
    return object.text;
  },
  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return this.text.localeCompare(term)===0;
    }).length===0) {
      return {id:term, text:term};
    }
  },
});

(entnommen aus einer Antwort auf der select2-Mailingliste, kann den Link aber jetzt nicht finden)

Die hervorragende Antwort von @fmpwizard funktioniert für Select2 3.5.2 und niedriger, funktioniert jedoch nicht in 4.0.0 .

Select2 unterstützt seit sehr früh (aber vielleicht nicht so früh wie diese Frage) "Tagging": Hier können Benutzer ihren eigenen Wert hinzufügen, wenn Sie dies zulassen. Dies kann über die tagsOption aktiviert werden , und Sie können mit einem Beispiel in der Dokumentation herumspielen .

$("select").select2({
  tags: true
});

Standardmäßig wird eine Option erstellt, die denselben Text wie der eingegebene Suchbegriff enthält. Sie können das verwendete Objekt ändern, wenn Sie es auf besondere Weise markieren möchten, oder das Objekt nach Auswahl aus der Ferne erstellen.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

select2:selectDie zusätzliche Eigenschaft dient nicht nur als leicht zu erkennendes Flag für das durch das Ereignis übergebene Objekt , sondern ermöglicht es Ihnen auch, die Option im Ergebnis etwas anders zu rendern. Wenn Sie also visuell signalisieren möchten, dass es sich um eine neue Option handelt, indem Sie " (neu) " daneben setzen, können Sie so etwas tun.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newOption) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

Nur um den Code am Leben zu erhalten, poste ich den Code von @rrauenza Fiddle aus seinem Kommentar .

HTML

<input type='hidden' id='tags' style='width:300px'/>

jQuery

$("#tags").select2({
    createSearchChoice:function(term, data) { 
        if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
        }).length===0) 
        {return {id:term, text:term};} 
    },
    multiple: false,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

Da viele dieser Antworten in 4.0+ nicht funktionieren, kann der Server bei Verwendung des Ajax den neuen Wert als Option hinzufügen. So würde es funktionieren:

1. Benutzer sucht nach Wert (wodurch eine Ajax-Anfrage an den Server gestellt wird)
2. Wenn der Wert groß ist, geben Sie die Option zurück. Wenn nicht, lassen Sie den Server diese Option wie folgt anhängen:[{"text":" my NEW option)","id":"0"}]
3. Wenn das Formular gesendet wird, überprüfen Sie einfach, ob sich diese Option in der Datenbank befindet, und erstellen Sie sie vor dem Speichern, falls nicht.

Es gibt eine bessere Lösung, denke ich jetzt

Setzen Sie das Tagging in den Auswahloptionen einfach auf true.

tags: true

von https://select2.org/tagging

Verbesserte Antwort auf @fmpwizard:

//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
  if ( $(data).filter( function() {
    return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
  }).length===0) {
    return {id:term, text:term};
  }
},

//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined

Ich bin gerade von Kevin Brown darauf gestoßen. https://stackoverflow.com/a/30019966/112680

Sie müssen v4.0.6lediglich den tags: trueParameter verwenden.

var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;

In den meisten Fällen müssen wir Werte mit unempfindlichen Registern vergleichen. Und dieser Code gibt false zurück, was zur Erstellung doppelter Datensätze in der Datenbank führt. Darüber hinaus wird String.prototype.localeCompare () vom Browser Safary nicht unterstützt und dieser Code funktioniert in diesem Browser nicht.

return this.text.localeCompare(term)===0;

wird besser ersetzen

return this.text.toLowerCase() === term.toLowerCase();

Vielen Dank für die Hilfe, ich habe den folgenden Code in Codeigniter II verwendet und verwende Version: 3.5.2 von select2.

var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
    ajax: {
        url: location_url,
        dataType: 'json',
        quietMillis: 100,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            results = [];
            $.each(data, function(index, item){
                results.push({
                    id: item.location_id,
                    text: item.location_name
                });
            });
            return {
                results: results
            };
        }
    },
    //Allow manually entered text in drop down.
    createSearchChoice:function(term, results) {
        if ($(results).filter( function() {
            return term.localeCompare(this.text)===0; 
        }).length===0) {
            return {id:term, text:term + ' [New]'};
        }
    },
});