formatSelection在select2.js中不起作用 [英] formatSelection not working in select2.js

问题描述

我正在使用select2.js通过ajax调用使用多个值填充该字段.

I am using select2.js to populate the field with multiple values using ajax call.

下面是我正在使用的代码.

Below is the code that I am using.

HTML

<input id="id_test_name" class="form-control">

脚本

<script type="text/javascript">
    $("#id_test_name").select2({
        placeholder: "Search for an Item",
        minimumInputLength: 2,
        ajax: {
            url: "/resourse/?format=json&name=xyz",
            dataType: 'json',
            quietMillis: 100,
            data: function (term, page) {
                return {
                    option: term
                };
            },
            results: function (data, page) {
                return {
                    results: $.map(data.results, function (item) {
                        return {
                            name: item.name,
                            abbreviation: item.abbreviation,
                            id: item.id
                        }
                    })
                };
            }
        },
        formatResult: function (data, term) {
            return data.name + '(' +  data.abbreviation +')';
        },
        formatSelection: function (data) {
            return data.name + '(' +  data.abbreviation +')';
        },
        dropdownCssClass: "bigdrop",
        escapeMarkup: function (m) {
            return m;
        }
    });
</script>

结果在下拉列表中填充，但是我无法选择填充的结果，我找不到错误的地方吗?

results are populating in dropdown but I am not able to select the populated results, I am not able to find what I am doing wrong?

我还需要在其他(隐藏)字段中选择结果的ID.

Also I need the id of selected results in some other(hidden) field.

更新: jsfiddle: http://jsfiddle.net/n5phohov/2

Update: jsfiddle: http://jsfiddle.net/n5phohov/2

推荐答案

如果使用的是当前的select2 v4，则将参数formatResult和formatTemplate替换为templateResult和templateSelection.您也可以调用函数来格式化结果.在下面的示例中，观察到我使用了data属性中包含的base64图像，您可以轻松地替换与该选项匹配的图像链接.

If you are using the current select2 v4, the parameters formatResult and formatTemplate were replaced by templateResult and templateSelection. Also you can call functions to format the results. Look the example bellow, observe that I used base64 image contained in a data attribute, you can easily replace for an image link matching with the option.

$('#combo').select2({
        language : "pt-BR",
        allowClear: true,
        placeholder: "Selecione",
        templateResult: formatSingleResult,        
        templateSelection: formatSelected       
    }).on('select2:select', function (e) {
    var data = e.params.data;
    let thumbnailValue='';
    $(data.element.attributes).each( function (){
        if ($(this)[0].name == 'data-thumbnail' ){        
            thumbnailValue = $(this)[0].value;
        }
    });

function formatSelected(state) {
    let img='';
    if (printImage == true){
          img='<img src="' + $(state.element).attr('data-thumbnail') +'" class="comboImg"/>';
  }
  $item = $(`<span>${img} ${state.text.trim()}<span>`); 
  return $item;
}

function formatSingleResult (result) {
    if (!result.id) {
        return result.text.trim();
    } 
    let img="";
        if (printImage == true){
        img='<img src="' + $(result.element).attr('data-thumbnail') +'" class="flag"/>';
    }    
    const optionText = result.text.trim();  
    const $item = $(`<span>${img} ${optionText}<span>`);
    return $item;
}

这篇关于formatSelection在select2.js中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！