paramquery框架模态框内Dropdown search功能失效解决方案咨询

根因分析 #

• 初始化时机错误：$(document).ready仅在页面首次DOM加载完成时执行，而模态框属于动态渲染元素，执行初始化代码时#CustomerID还未插入到页面DOM中，导致控件功能绑定失败，普通页面元素一开始就存在所以功能正常。
• 重复初始化冲突：代码中两次调用pqSelect()初始化同一个下拉框，配置互相覆盖导致功能异常。
• 部分版本pqSelect默认未开启搜索功能，需要显式配置参数。

修复步骤 #

1. 将初始化逻辑迁移到模态框渲染完成的回调事件中，保证初始化时目标元素已存在
2. 合并pqSelect配置，删除重复初始化代码，显式开启搜索功能
3. 每次模态框打开前先销毁旧的控件实例，避免残留配置冲突

修复后代码示例 #

// 示例为Bootstrap模态框，若使用其他组件替换为对应模态框显示完成事件即可
$('#你的模态框实际ID').on('shown.bs.modal', function () {
  // 销毁已存在的实例，避免冲突
  if ($("#CustomerID").hasClass('pq-select')) {
    $("#CustomerID").pqSelect('destroy');
  }

  // 合并所有配置，显式开启搜索
  $("#CustomerID").pqSelect({
    singlePlaceholder: '',
    multiplePlaceholder: 'Müşteri Seçiniz',
    maxSelect: 1,
    width: '92%',
    search: true, // 开启搜索功能
    searchRule: 'contain' // 搜索匹配规则：包含关键词即命中，可替换为'begin'实现开头匹配
  }).on("change", function(evt) {
    const pccmail = $(this).val();
    if (pccmail != "") {
      $('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('');
    } else {
      $('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('Boş geçilemez');
    }
    $('[id^=CCMailinput]').val(pccmail);
  });

  // 请求客户数据
  $.ajax({
    url: "/TicketDashboard/GetCustomer",
    method: "Post",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
      $("#CustomerID").empty();
      $.each(data, function(index, value) {
        $('#CustomerID').append(`<option value="${value.CustomerID}">${value.CustomerName}</option>`);
      });
      $("#CustomerID").pqSelect("refreshData");
      $('span[data-valmsg-for="OpportunityAttachmentViewModel.CCMail"]').html('Boş geçilemez.');
    }
  });
})

异常排查补充 #

如果修改后搜索框仍无法点击，检查z-index层级问题：模态框的z-index过高会遮挡pqSelect的下拉浮层，可添加如下样式修复：

.pq-select-popup {
  z-index: 99999 !important;
}

内容的提问来源于stack exchange，提问作者muhyag