web-dev-qa-db-de.com

Select2 Ajax-Methode nicht auswählbar

Ok, ich bin sicher, dass hier etwas falsch eingestellt ist, aber ich bin nicht 100% dessen, was es ist.

Ich versuche daher die Select2 AJAX - Methode als eine Möglichkeit für Benutzer, eine Datenbank zu durchsuchen und ein Ergebnis auszuwählen. Der Anruf selbst wird mit Ergebnissen zurückgegeben, jedoch kann ich die Antwort nicht aus der Liste auswählen. Es scheint auch nicht zuzulassen, dass Sie es auf dem Hover oder dem Aufwärts-/Abwärtspfeil auswählen. Also ohne weiteres, hier ist mein Code:

index.html

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
        <script src="select2/select2.js"></script>
        <script src="select.js"></script>
    </head>
    <body>
        <input type="text" style="width: 500px" class="select2">
    </body>
</html>

select.js

jQuery(function() {

  var formatSelection = function(bond) {
    console.log(bond)
    return bond.name
  }

  var formatResult = function(bond) {
    return '<div class="select2-user-result">' + bond.name + '</div>'
  }

  var initSelection = function(elem, cb) {
    console.log(elem)
    return elem
  }

    $('.select2').select2({
      placeholder: "Policy Name",
      minimumInputLength: 3,
      multiple: false,
      quietMillis: 100,
      ajax: {
        url: "http://localhost:3000/search",
        dataType: 'json',
        type: 'POST',
        data: function(term, page) {
          return {
            search: term,
            page: page || 1
          }
        },
        results: function(bond, page) {
          return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
        }
      },
      formatResult: formatResult,
      formatSelection: formatSelection,
      initSelection: initSelection
    })
})

JSON-Antwort

{
  error: null,
  results: [
    {
      name: 'Some Name',
      _id: 'Some Id'
    },
    {
      name: 'Some Name',
      _id: 'Some Id'
    }
  ]
}

Alles scheint richtig zu sein, aber ich kann die Antwort nicht wirklich auswählen und sie in die Box eingeben. Gibt es irgendwo ein Problem in meinem Code?

71
AlbertEngelB

Nach einem Blick auf eine andere Antwort scheint es so, als müsste ich bei jedem Anruf auch das ID-Feld übergeben, andernfalls wird die Eingabe deaktiviert.

Beispielcode, der das Problem behoben hat:

$('.select2').select2({
  placeholder: "Policy Name",
  minimumInputLength: 3,
  multiple: false,
  quietMillis: 100,
  id: function(bond){ return bond._id; },
  ajax: {
    url: "http://localhost:3000/search",
    dataType: 'json',
    type: 'POST',
    data: function(term, page) {
      return {
        search: term,
        page: page || 1
      }
    },
    results: function(bond, page) {
      return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
    }
  },
  formatResult: formatResult,
  formatSelection: formatSelection,
  initSelection: initSelection
})

Bearbeiten

Da dies immer auf dem neuesten Stand ist, werde ich ein wenig näher darauf eingehen. Die .select2 () -Methode erwartet für alle Ergebnisse ein eindeutiges id-Feld. Zum Glück gibt es eine Problemumgehung. Die Option id akzeptiert eine Funktion wie die folgende:

function( <INDIVIDUAL_RESULT> ) {
  // Expects you to return a unique identifier.
  // Ideally this should be from the results of the $.ajax() call. 
}

Da meine eindeutige ID <RESULT>._id war, habe ich einfach return <RESULT>._id;

139
AlbertEngelB

Die Sache ist, dass die JSON-Daten eine Eigenschaft namens "id" benötigen. Es besteht keine Notwendigkeit für 

id: function (bond) {return bond._id; }

Wenn die Daten keine ID für sich haben, können Sie sie mit einer Funktion in processResults hier hinzufügen.

        $(YOUR FIELD).select2({
            placeholder: "Start typing...",
            ajax: {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "YOUR API ENDPOINT",
                dataType: 'json',
                data: 
                    function (params) {
                        return JSON.stringify({ username: params.term });
                },
                processResults: function (data, page) {

                    var results = [];

                    $.each(JSON.parse(data.d), function (i, v) {
                        var o = {};
                        o.id = v.key;
                        o.name = v.displayName;
                        o.value = v.key;
                        results.Push(o);
                    })

                    return {
                        results: results
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup;},
            minimumInputLength: 1,
            templateResult: function (people) {
                if (people.loading)
                    return people.text;

                var markup = '<option value="' + people.value + '">' + people.name + '</option>';

                return markup;
            },
            templateSelection: function (people) { return people.value || people.text }

        });    
11
Andres Gonzalez

Seien Sie auch vorsichtig mit dem Fall. Ich habe Id verwendet, aber select2 erwartet id. Könnte jemandem die Zeit sparen.

5
Eugene

Wie Dropped.on.Caprica sagte: Jedes Ergebniselement benötigt eine eindeutige ID.

Weisen Sie also jedem Ergebnis id eine eindeutige Nummer zu:

$('#searchDriver').select2({
    ajax: {
       dataType: 'json',
       delay: 250,
       cache: true,
       url: '/users/search',
       processResults: function (data, params) {
           //data is an array of results
           data.forEach(function (d, i) {
               //Just assign a unique number or your own unique id
               d.id = i; // or e.id = e.userId;
           })

           return {
               results: data
           };
       },
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});
4
Anh Cao

Ich habe viele Probleme bezüglich des folgenden Fehlers Option 'ajax' ist für Select2 nicht erlaubt  

In meinem Fall wird für select angezeigt, wenn Sie select2 Version 3.5 verwenden, Daher sollten Sie ein Upgrade auf Version 4.0 durchführen, und Sie benötigen keine versteckten Eingaben, die mit select verbunden sind

1
Ebrahim

 enter image description here

Sie können die Auswahl einer Option (in diesem Fall die erste) auslösen, indem Sie das select2-Element programmgesteuert öffnen und dann einen return-Tastendruck auslösen.

var e = jQuery.Event('keydown');
e.which = 13;

$('.offer_checkout_page_link select').select2('open');
$('.offer_checkout_page_link .select2-selection').trigger(e);

Dadurch wird die Option so eingestellt, als ob Sie darauf geklickt hätten. Sie können dies ändern, um eine bestimmte Option auszuwählen, indem Sie die entsprechende Anzahl von down-Tastendrücken auslösen, bevor Sie die return-Taste auslösen.

Wenn Sie auf eine Option klicken (oder in diesem Fall auf enter klicken), scheint es so, als ob Sie eine Option auswählen würden. Ein Auswahlelement wird dem Auswahlelement hinzugefügt. Sie werden feststellen, dass beim ersten Laden der Seite select2 select-Elemente keine untergeordneten option-Elemente vorhanden sind. Aus diesem Grund schlagen andere Lösungen vor, ein Optionselement mit jQuery hinzuzufügen und es dann auszuwählen.

0
Justin Leveck