select2显示默认选项(静态)并执行ajax搜索(如果未找到)

时间:2016-07-07 16:15:39

标签: jquery ajax select2 jquery-select2-4

我有select2 v4静态选择(100个选项)。 当在默认选项列表中找不到用户输入时,我需要进行ajax搜索。

由于我无法使用相同的选择对象,因此我使用了不同的ajax搜索。 所以我隐藏了默认选择并用ajax_select替换。 做ajax搜索。

代码:

<script type="text/javascript">

    var s2_search =''; //global var for search string

    $("#default_select").select2({
        placeholder: "Select an item",
        debug: true,
        minimumInputLength: 0, // important!!! => without setting to 0 the default data will not be shown

        tags:true,
        createTag: function (params) {
            s2_search = params.term; //assing search string to var
        },

        templateResult: function(data){

            var $result = $("<span></span>");

            $result.text(data.text);

            return $result;
        },
        escapeMarkup: function (markup) {
            if(markup == 'No results found'){
               // item is not found in default activate the ajax select
                $('#div_default').addClass('hidden');
                $('#div_new').removeClass('hidden');
                new_select_func(s2_search)
            }
            else {
                return markup;
            }
        }
    });

    var $myselect = $('#new_select').select2({
        minimumInputLength: 0,
        ajax: {
            url: BASE_URL + '/get_more',
            dataType: 'json',
            cache: true,
            delay: 350,
            data: function (params) {
                return {
                    q: params.term//, // search term
                };
            },
            processResults: function (data, params) {
                if(data === false){
                    // if the item is not found in the database display a modal form to insert the item
                    // This works 
                    $.get(BASE_URL+'/get_new_form',{plate: params.term}, function (data) {
                        $('#myModal').find('.modal-body').html(data);
                    });
                    $('#myModal').modal('show');
                }
                else {
                    return {
                        results: data 
                    };
                }
            }
        },
        templateSelection: formatNewSelection 

    });

    function formatNewSelection(data, container) {

        // append the new item to the default select
        $("#default_select").append($('<option>', {value: data.id, text: data.text}));
        //restore default select 
        $('#div_default').removeClass('hidden');
        // hide new select
        $('#div_new').addClass('hidden');

        return data.text;
    }
    function new_select_func(search_val) {
        //close default select 
        $("#default_select").select2("close");
        //open new select 
        $myselect.select2('open');
        // set search string and trigger ajax search
        var $search = $myselect.data('select2').dropdown.$search || $myselect.data('select2').selection.$search;
        $search.val(search_val);
        $search.trigger('keyup');

    }
</script>

绝对不是最好的方法,但我只有一个问题。当我在ajax_select中选择一个项目以将其附加到默认选择时,它会创建相同的选项4次。 任何人都可以告诉我为什么,还有更好的方法吗?

谢谢你, Salain

1 个答案:

答案 0 :(得分:0)

在ajax_select(new_select)中进行选择时,我已解决附加到default_select的多个选项。问题在于templateSelection函数formatNewSelection,我用select2:select事件替换了它。

new_select的代码:

var $myselect = $('#new_select').select2({
    minimumInputLength: 0,
    ajax: {
        url: BASE_URL + '/get_more',
        dataType: 'json',
        cache: true,
        delay: 350,
        data: function (params) {
            return {
                q: params.term//, // search term
            };
        },
        processResults: function (data, params) {
            if(data === false){
                // if the item is not found in the database display a modal form to insert the item
                // This works 
                $.get(BASE_URL+'/get_new_form',{plate: params.term}, function (data) {
                    $('#myModal').find('.modal-body').html(data);
                });
                $('#myModal').modal('show');
            }
            else {
                return {
                    results: data 
                };
            }
        }
    } 
   // the Selection template and function are not needed using default format
   //,templateSelection: formatNewSelection 

});

$myselect.on("select2:select",  function(e) {

    // append the new item to the default select
    $("#default_select").append($('<option>', {value: e.params.data.id, text: e.params.data.text}));
    //restore default select 
    $('#div_default').removeClass('hidden');
    // hide new select
    $('#div_new').addClass('hidden');

});

这仍然不是最好的编码,但它现在有效。 任何改善这方面的帮助都会受到赞赏。