如何在Select2中使用YDN-db替代Ajax实现数据检索功能

核心问题梳理 #

• 配置项使用错误：data属性仅支持静态数组数据源，异步查询需要使用ajax配置项，自定义查询逻辑替换默认的XHR请求
• 参数获取错误：params是Select2传递的上下文对象，用户输入的搜索关键词存放在params.term字段，不可直接使用params本身作为查询条件
• 异步结果未回传：YDN-db的异步查询结果需要通过Select2提供的回调函数返回，才能被组件正常识别渲染
• SQL拼接存在注入风险：直接拼接查询参数会引发SQL注入问题，建议使用参数化查询
• 结果格式不符合要求：Select2要求返回的结果数组每个元素必须包含id和text两个必填字段，自定义渲染模板需要配合templateResult配置项实现

正确实现代码 #

$('#add_product_id').select2({
  // 异步数据源通过ajax配置项实现
  ajax: {
    // 自定义传输层替换默认的HTTP请求逻辑
    transport: function(params, success, failure) {
      // 获取用户输入的搜索关键词
      const searchTerm = params.data.term;
      // 参数化查询避免SQL注入
      APP.db.executeSql(
        "SELECT * FROM products WHERE name like ?",
        [`%${searchTerm}%`]
      ).then(function(resultRows) {
        // 将查询结果通过成功回调返回
        success({ results: resultRows });
      }).catch(function(err) {
        failure(err);
      });
    },
    // 处理查询结果，适配Select2要求的格式
    processResults: function(data) {
      return {
        results: data.results.map(item => ({
          id: item.id, // 替换为产品表实际的主键字段名
          text: item.name,
          // 附加其他字段供模板渲染使用
          price: item.price,
          sku: item.sku,
          stock_quantity: item.stock_quantity
        }))
      };
    },
    cache: true
  },
  // 自定义搜索结果渲染模板
  templateResult: function(product) {
    if (product.loading) return product.text;
    const title = `<span class="result-title">${product.text}</span>`;
    const price = `<span class="result-price">${product.price}</span>`;
    const sku = `<span class="result-sku">${pos_i18n[60]} ${product.sku}</span>`;
    const stock = `<span class="result-stock">${pos_i18n[61]} ${product.stock_quantity}</span>`;
    return `
      <div class="result-row first">${title}${price}</div>
      <div class="result-row second">${sku}${stock}</div>
    `;
  },
  escapeMarkup: function(markup) { return markup; },
  minimumInputLength: 3,
  multiple: true
}).change(function() {
  const val = $(this).select2('data');
  $(this).html('');
  if (val && val.length) {
    val = Array.isArray(val) ? val[0] : val;
    // 后续业务逻辑
  }
});

内容的提问来源于stack exchange，提问作者Mohib Salahuddin Ayubi