Select2 không biết văn bản tương ứng của giá trị đã chọn

Question

Tôi sử dụng nguồn dữ liệu từ xa cho các tùy chọn. Khi tôi tải dữ liệu biểu mẫu từ máy chủ, nó chỉ chứa các giá trị của các phần tử được chọn. Trong tình huống như vậy, select2 không biết văn bản tương ứng để hiển thị cho người dùng. Có bất kỳ cơ chế tái sử dụng tích hợp nào cho kịch bản chung này không?

Cách đặt giá trị/văn bản hiện được chọn khi dữ liệu được tìm nạp bằng ajax?

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

Thật vậy, tôi đang cố gắng để tạo ra một chỉ thị góc như sau:

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

Đây là tùy chọn ajax của bạn:

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

về chức năng processResult sử dụng:

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

Answer 2

Bạn có thể sử dụng dữ liệu & kết quả chức năng trong cuộc gọi ajax của bạn để yêu cầu, phân tích, và thiết lập dữ liệu json của bạn phụ thuộc vào dữ liệu của bạn.

Dưới đây là một đoạn mã nhỏ từ một số mã sản xuất của tôi mà không một cái gì đó tương tự như những gì bạn đang yêu cầu:

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

Trong data: Tôi đang sử dụng giá trị params để vượt qua giá trị ban đầu để ajax của tôi api, sau đó trong các results: trả lại dữ liệu; Tôi có thể nhận được giá trị đầu vào ban đầu (searched_for) và ghép nó với các dữ liệu khác bên dưới, phân tích cú pháp nó ra và nối nó như được thấy trong ví dụ.

Tôi không biết cách cung cấp cho bạn câu trả lời chính xác mà bạn đang tìm kiếm mà không cần chi tiết hơn, nhưng tôi tin đoạn mã minh họa các loại hành vi bạn đang cố gắng hoàn thành. Ngoài ra, tôi chỉ nhận thấy câu trả lời của @ prollyGeek đã được thông qua khi tôi đã gõ này, đọc các tài liệu trong các ý kiến ​​là tốt, khá hữu ích.

Answer 3

Bạn chỉ có thể kiểm tra mô-đun góc gói này chọn2 vào góc theo cách thích hợp: ui-select Vì nó sử dụng tính ràng buộc góc. Bạn sẽ có thể đặt giá trị trả lại sau khi lời hứa giải quyết. Dù sao thì bạn không nên sử dụng hàm ajax() và sử dụng $ http thay cho tất cả các cuộc gọi không đồng bộ của bạn.

Dưới đây là một dụ:

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

giá trị binded của bạn trong dụ được "person.selected" và danh sách là "nhân dân" Bạn chỉ cần phải làm điều gì đó như thế này trong điều khiển của bạn:

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

Hy vọng nó sẽ giúp bạn.