Jquery 选择2显示默认选项（静态），如果未找到，则执行ajax搜索

我已经选择了带有静态选择的2 v4（100个选项）。 当在默认选项列表中找不到用户输入时，我需要进行ajax搜索

由于我不能使用同一个select对象，所以我对ajax搜索使用了不同的方法。 因此，我隐藏了默认的select并替换为ajax\u select。 进行ajax搜索

代码：

var s2_search=''//搜索字符串的全局变量
$（“默认选择”）。选择2({
占位符：“选择一个项目”，
是的，
minimumInputLength:0，//重要！！！=>如果不设置为0，将不会显示默认数据
标签：是的，
createTag:函数（参数）{
s2_search=params.term；//将搜索字符串分配给变量
},
templateResult:函数（数据）{
变量$result=$（“”）；
$result.text（data.text）；
返回$result；
},
转义标记：函数（标记）{
如果（标记=='未找到结果'）{
//在默认激活ajax选择中找不到项
$（'div_default'）.addClass（'hidden'）；
$（'div#u new'）。removeClass（'hidden'）；
新建选择功能（s2搜索）
}
否则{
返回标记；
}
}
});
var$myselect=$（“#新建_选择”）。选择2({
最小输入长度：0，
阿贾克斯：{
url:BASE_url+'/get_more'，
数据类型：“json”，
是的，
延误：350，
数据：函数（参数）{
返回{
q:params.term//，//搜索词
};
},
processResults：函数（数据、参数）{
如果（数据===false）{
//如果在数据库中找不到该项，则显示模式表单以插入该项
//这很有效
$.get（BASE_URL+'/get_new_form'，{plate:params.term}，函数（数据）{
$（'#myModal'）.find（'.modal body'）.html（数据）；
});
$（'myModal'）.modal（'show'）；
}
否则{
返回{
结果：数据
};
}
}
},
templateSelection:formatNewSelection
});
函数formatNewSelection（数据、容器）{
//将新项附加到默认的选择项
$（“#default_select”）.append（$（''，{value:data.id，text:data.text}））；
//恢复默认选择
$（'div_default'）。removeClass（'hidden'）；
//隐藏新选择
$（'div#u new'）.addClass（'hidden'）；
返回data.text；
}
函数新建选择函数（搜索值）{
//关闭默认选择
$（“默认选择”）。选择2（“关闭”）；
//打开新选择
$myselect.select2（'open'）；
//设置搜索字符串并触发ajax搜索
var$search=$myselect.data（'select2'）。下拉列表。$search | |$myselect.data（'select2'）。selection。$search；
$search.val（search_val）；
$search.trigger（'keyup'）；
}

当然不是最好的方法，但我只有一个问题。当我在ajax中选择一个项目时，请选择将其附加到默认值，然后选择创建相同的选项4次。 有人能告诉我为什么吗？有没有更好的方法

谢谢,，

---

Salain

我已经解决了在ajax中进行选择（新建选择）时附加到默认选择的多选项问题。问题在于templateSelection函数formatNewSelection，我已将其替换为select2:select事件

新的\u选择代码：

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');

});

var$myselect=$（'new#u select'）。选择2({
最小输入长度：0，
阿贾克斯：{
url:BASE_url+'/get_more'，
数据类型：“json”，
是的，
延误：350，
数据：函数（参数）{
返回{
q:params.term//，//搜索词
};
},
processResults：函数（数据、参数）{
如果（数据===false）{
//如果在数据库中找不到该项，则显示模式表单以插入该项
//这很有效
$.get（BASE_URL+'/get_new_form'，{plate:params.term}，函数（数据）{
$（'#myModal'）.find（'.modal body'）.html（数据）；
});
$（'myModal'）.modal（'show'）；
}
否则{
返回{
结果：数据
};
}
}
} 
//使用默认格式不需要选择模板和函数
//，templateSelection:formatNewSelection
});
$myselect.on（“select2:select”，函数（e）{
//将新项附加到默认的选择项
$（“#default_select”）.append（$（''，{value:e.params.data.id，text:e.params.data.text}）；
//恢复默认选择
$（'div_default'）。removeClass（'hidden'）；
//隐藏新选择
$（'div#u new'）.addClass（'hidden'）；
});

这仍然不是最好的编码，但它现在可以工作。

---

如果您能提供任何帮助，我们将不胜感激。

我已经解决了在ajax\u select（新的\u select）中进行选择时，默认\u select附加的多选项问题。问题在于templateSelection函数formatNewSelection，我已将其替换为select2:select事件

新的\u选择代码：

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');

});

var$myselect=$（'new#u select'）。选择2({
最小输入长度：0，
阿贾克斯：{
url:BASE_url+'/get_more'，
数据类型：“json”，
是的，
延误：350，
数据：函数（参数）{
返回{
q:params.term//，//搜索词
};
},
processResults：函数（数据、参数）{
如果（数据===false）{
//如果在数据库中找不到该项，则显示mod