Question

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

以下是我正在使用的代码。

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>

结果在下拉列表中填充，但我无法选择填充的结果，我无法找到我做错了什么？

此外，我还需要在其他（隐藏）字段中选择结果的ID。

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

Answer 1

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

$('#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中不起作用

1 个答案: