select2插件：使用input标签并采用ajax请求后台数据，搜索框无效

Question

代码如下：

$("#countyCd").select2({
placeholder: "请选择县名称",
allowClear: true,
//minimumInputLength: 2,
ajax: {
url: getContentPath() + "xxx",
dataType: 'json',
data: function (term, page) {
return {
'searchCondition.cityCd': $('#cityCd').val()
};
},
results: function (data, page) {
return {results: data};
},
cache: true
},
formatResult: resultFormatResult, // omitted for brevity, see the source of this page
id: function (item) {
return item.adCd;
},
formatSelection: resultFormatSelection, // omitted for brevity, see the source of this page
initSelection: function (element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax(getContentPath() + "xxx?countyCd=" + id, {
dataType: "json"
}).done(function (data) {
callback(data);
});
}
}
});
无法在返回结果中使用查询框进行筛选查询

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

您的问题主要集中在如何正确地使用Select2插件，并且如何处理Ajax请求。以下是针对您提供的示例的修正步骤：

步骤1：确保正确的URL和参数传递

首先，确保您的get_content_path()函数是正确的并且可以正确获取到所需的页面数据。

function get_content_path() {
    // 这里应该有实际的应用程序逻辑来生成路径
}

然后，检查您的ajax设置中的url属性是否指向了正确的路径。

步骤2：处理查询字符串参数

为了正确处理查询字符串参数，您需要将searchCondition对象转换为一个包含cityCd值的对象。这可以通过以下方式完成：

var searchCondition = {};
if ($('#cityCd').val()) {
    searchCondition.cityCd = $('#cityCd').val();
}

// ... 其他代码...

步骤3：格式化结果

确保在formatResult回调函数中对结果进行适当格式化，以便可以在显示时使用查询条件进行过滤。

function resultFormatResult(item, searchCondition) {
    return {
        text: item.adCd,
        value: item.adCd,
        label: item.adNm
    };
}

步骤4：初始化选择器

最后，当选择器加载完毕后，将其与JavaScript事件绑定在一起，以处理用户输入的变化。

$('#countyCd').on('change', function() {
    // 获取当前选中的县名称
    var countyCd = $(this).val();
    
    // 调用之前定义的函数进行AJAX请求
    // ...
});

结果展示

通过上述步骤，您可以正确地使用Select2插件处理查询条件，并实现有效的搜索功能。如果您能提供更多的详细信息或具体的错误消息，我可能能够提供更精确的帮助。