Select2 does not know the corresponding text of the selected value

Question

I am using a remote data source for parameters. When I load form data from the server, it contains only the values ​​of the select elements. In this situation, select2 does not know the appropriate text to display to the user. Is there a built-in reuse mechanism for this common scenario?

How to set current selected value / text when data is extracted using ajax?

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

In fact, I am trying to create an angular directive as follows:

 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

These are your ajax options:

 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; } } 

for the processResult function:

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

Answer 2

You can use the data and result functions in your ajax call to query, analyze and set your json data depending on your data.

Here is a small piece of code from my production code that does something similar to what you are asking:

 $(".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: I use the params value to pass the original value to my ajax api, and then in results: return the data; I can get the original input value ( searched_for ) and associate it with the other data below, parse it and concatenate, as shown in the example.

I don’t know how to give you the exact answer you are looking for, but not in more detail, but I believe that the code fragment illustrates the types of behavior that you are trying to execute. Also, I just noticed that @prollyGeek's answer came when I printed it, read the documents in the comments, and is also useful.

Answer 3

You can simply check this angular module wrap2 select2 for angular accordingly: ui-select Since it uses angular binding. You should be able to set a return value after resolving the promise. In any case, you should not use the ajax () function and use $ http for all your asynchronous calls instead.

Here is an example:

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

Your related value in the example is "person.selected" and the list is "people", you just need to do something like this in your controller:

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

Hope this helps you.