Select2 non conosce il testo corrispondente del valore selezionato

Question

Io uso l'origine dati remota per le opzioni. Quando carico i dati del modulo dal server, contiene solo i valori degli elementi selezionati. In tale situazione, select2 non conosce il testo corrispondente da mostrare all'utente. C'è qualche meccanismo integrato riutilizzabile per questo scenario comune?

Come impostare il valore/testo correntemente selezionato quando i dati vengono recuperati utilizzando ajax?

$('select#test').select2({ 
        ajax: { 
         url: "user/combo", 
         dataType: 'json', 
         delay: 250, 
         cache: true 
        } 
       }); 
      } 
     } 

Anzi, sto cercando di creare una direttiva angolare come segue:

app.directive('mehrUserCombo', ['$http', function ($http) { 
     return { 
      link: function (scope, element, attr) { 
       element.select2({ 
        ajax: { 
         url: "user/combo", 
         dataType: 'json', 
         delay: 250, 
         cache: true 
        } 
       }); 
      } 
     } 

Answer 1

Queste sono le opzioni Ajax:

ajax: { 
 
    // The number of milliseconds to wait for the user to stop typing before 
 
    // issuing the ajax request. 
 
    delay: 250, 
 
    // You can craft a custom url based on the parameters that are passed into the 
 
    // request. This is useful if you are using a framework which has 
 
    // JavaScript-based functions for generating the urls to make requests to. 
 
    // 
 
    // @param params The object containing the parameters used to generate the 
 
    // request. 
 
    // @returns The url that the request should be made to. 
 
    url: function(params) { 
 
    return UrlGenerator.Random(); 
 
    }, 
 
    // You can pass custom data into the request based on the parameters used to 
 
    // make the request. For `GET` requests, the default method, these are the 
 
    // query parameters that are appended to the url. For `POST` requests, this 
 
    // is the form data that will be passed into the request. For other requests, 
 
    // the data returned from here should be customized based on what jQuery and 
 
    // your server are expecting. 
 
    // 
 
    // @param params The object containing the parameters used to generate the 
 
    // request. 
 
    // @returns Data to be directly passed into the request. 
 
    data: function(params) { 
 
    var queryParameters = { 
 
     q: params.term 
 
    } 
 

 
    return queryParameters; 
 
    }, 
 
    // You can modify the results that are returned from the server, allowing you 
 
    // to make last-minute changes to the data, or find the correct part of the 
 
    // response to pass to Select2. Keep in mind that results should be passed as 
 
    // an array of objects. 
 
    // 
 
    // @param data The data as it is returned directly by jQuery. 
 
    // @returns An object containing the results data as well as any required 
 
    // metadata that is used by plugins. The object should contain an array of 
 
    // data objects as the `results` key. 
 
    processResults: function(data) { 
 
    return { 
 
     results: data 
 
    }; 
 
    }, 
 
    // You can use a custom AJAX transport function if you do not want to use the 
 
    // default one provided by jQuery. 
 
    // 
 
    // @param params The object containing the parameters used to generate the 
 
    // request. 
 
    // @param success A callback function that takes `data`, the results from the 
 
    // request. 
 
    // @param failure A callback function that indicates that the request could 
 
    // not be completed. 
 
    // @returns An object that has an `abort` function that can be called to abort 
 
    // the request if needed. 
 
    transport: function(params, success, failure) { 
 
    var $request = $.ajax(params); 
 

 
    $request.then(success); 
 
    $request.fail(failure); 
 

 
    return $request; 
 
    } 
 
}

sulla funzione processResult utilizzare:

processResults: function(data) { 
 
    $('select#test').select2("val", YOUR VALUE FROM PROCESSED DATA); //set the value 
 
    return { 
 
    results: data 
 
    }; 
 
}

Answer 2

È possibile utilizzare i dati & risultati funzioni all'interno della vostra chiamata ajax per richiedere, analizzare e impostare i dati JSON dipendente sui dati.

Ecco un piccolo frammento di codice da parte di alcuni del mio codice di produzione che fa qualcosa di simile a quello che stai chiedendo:

$(".autocomplete-search").select2({ 
    placeholder: "Pizza, Movies, etc...", 
    minimumInputLength: 2, 
    ajax: { 
    url: '/find-suggestions.json', 
    dataType: 'json', 
    quietMillis: 250, 
    data: function(params, page) { 
     return { 
     query: params, 
     page: page 
     }; 
    }, 
    results: function(data, page) { 
     var more, search_all, searched_for; 
     searched_for = $(".select2-search input").val(); 
     search_all = [ 
     { 
      query: searched_for 
     } 
     ]; 
     more = data.suggestions.stores.length >= 1; 
     return { 
     results: search_all.concat(data.suggestions.categories, data.suggestions.stores), 
     more: more 
     }; 
    } 
    } 
}); 

In data: sto usando il valore params per passare il valore originale alla mia ajax api, quindi nel results: restituendo i dati; Posso ottenere il valore di input originale (searched_for) e associarlo ad altri dati di seguito, analizzandolo e concatenandolo come mostrato nell'esempio.

Non so come darvi la risposta esatta che state cercando senza ulteriori dettagli, ma credo che il frammento di codice illustri i tipi di comportamenti che state cercando di realizzare. Inoltre, ho appena notato che la risposta di @ prollyGeek è arrivata mentre stavo scrivendo questo, leggere i documenti nei commenti, abbastanza utile.

Answer 3

Si può semplicemente verificare che questo modulo angolare avvolga select2 in modo corretto: ui-select Poiché utilizza il binding angolare. Dovresti essere in grado di impostare un ritorno di valore dopo la risoluzione della promessa. Ad ogni modo non si dovrebbe usare la funzione ajax() e usare invece $ http per tutte le chiamate asincrone.

Ecco un Esempio:

<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> 
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}"> 
     <div ng-bind-html="person.name | highlight: $select.search"></div> 
     <small> 
     email: {{person.email}} 
     age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> 
     </small> 
    </ui-select-choices> 
    </ui-select> 

Il valore binded nella exemple è "person.selected" e la lista è "la gente" Non vi resta che fare qualcosa di simile nel controller:

$http.get("/yourdatauri").success(function(data){ 
    $scope.people = data; 
}); 

Spero che ti possa aiutare.