web-dev-qa-db-fra.com

Méthode Select2 Ajax non sélectionnée

Ok, je suis sûr qu'il y a quelque chose de simple qui ne va pas, mais je ne suis pas à 100% de ce que c'est.

J'essaie donc d'utiliser la méthode Select2 AJAX pour permettre aux utilisateurs de rechercher une base de données et de sélectionner un résultat. L'appel lui-même revient avec des résultats, mais il ne me permettra pas de sélectionner la réponse dans la liste. Il ne semble pas non plus vous permettre de le "sélectionner" en survol ou en flèche haut/bas. Alors sans plus tarder, voici mon 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
    })
})

Réponse JSON

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

Tout semble fonctionner correctement, mais je suis incapable de sélectionner la réponse et de la saisir dans la boîte. Y a-t-il un problème quelque part dans mon code?

javascriptjqueryajaxjquery-select2jquery-select2-3
71
AlbertEngelB

Après avoir regardé une autre réponse il semblerait que je devrais également transmettre le champ id à chaque appel, sinon, l'entrée sera désactivée.

Exemple de code qui l'a corrigé:

$('.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
})

Modifier

Comme cela continue à me faire voter, je vais élaborer un peu. La méthode .select2 () attend un champ id unique sur tous les résultats. Heureusement, il existe une solution de contournement. L'option id accepte une fonction comme celle-ci:

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

Puisque mon identifiant unique était <RESULT>._id, je simplement return <RESULT>._id;

139
AlbertEngelB

Le fait est que les données JSON nécessitent une propriété appelée "id". Il n'y a pas besoin de 

id: fonction (lien) {return bond._id; }

Si les données ne possèdent pas d'id, vous pouvez les ajouter avec une fonction sur processResults comme ici.

        $(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

Faites également attention à l'affaire. J'utilisais Id mais select2 s'attend à id. Pourrait sauver du temps à quelqu'un.

5
Eugene

Like Dropped.on.Caprica a déclaré: Chaque élément de résultat nécessite un identifiant unique.

Il suffit donc d'attribuer à chaque résultat id un numéro unique:

$('#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

J'ai de nombreux problèmes concernant l'erreur suivante L'option 'ajax' n'est pas autorisée pour Select2  

Dans mon cas, apparaît pour select lorsque vous utilisez select2 version 3.5, Vous devez donc effectuer une mise à niveau vers la version 4.0 et vous n'aurez pas besoin d'entrées cachées attachées à votre sélection

1
Ebrahim

 enter image description here

Vous pouvez déclencher la sélection d’une option (dans ce cas la première) en ouvrant l’élément select2 par programme, puis en déclenchant une touche return.

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

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

Cela "définira" l'option comme si vous aviez cliqué dessus. Vous pouvez modifier ceci pour sélectionner une option spécifique en déclenchant le nombre approprié de touches down avant de déclencher celle return.

Il semble que lorsque vous cliquez (ou dans ce cas sur enter) pour sélectionner une option, un élément d'option est ajouté à l'élément de sélection. Vous remarquerez que lors du premier chargement de la page, les éléments de sélection select2 n'ont aucun enfant d'élément option. C'est pourquoi d'autres solutions suggèrent d'ajouter un élément d'option à l'aide de jQuery, puis de le sélectionner.

0
Justin Leveck