如何在jQuery QueryBuilder中集成带国旗的Bootstrap国家选择器

要把带国旗的Bootstrap Form Helpers国家选择器集成到QueryBuilder里，不能直接替换values配置——因为QueryBuilder的默认select输入不识别自定义的bfh-countries组件。我们需要利用QueryBuilder的自定义输入功能，手动渲染这个组件并处理值的交互。

下面是具体的实现步骤和完整代码：

核心思路 #

• 使用QueryBuilder的input: 'custom'声明自定义输入组件
• 通过template配置渲染bfh-countries的HTML结构
• 实现valueGetter和valueSetter方法，分别处理从组件获取值和给组件设置值的逻辑
• 监听规则添加事件，确保动态新增的规则里，国家选择器能正确初始化

完整代码示例 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/css/query-builder.default.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"></script>

<div id="builder"></div>

<script>
$('#builder').queryBuilder({
  plugins: ['bt-tooltip-errors', 'not-group'],
  filters: [{
    id: 'country',
    label: 'Country',
    type: 'string',
    input: 'custom', // 标记为自定义输入组件
    // 渲染带国旗的国家选择器模板
    template: function() {
      // 可选：添加data-filter限制显示指定国家，用逗号分隔国家代码
      return '<div class="bfh-selectbox bfh-countries" data-flags="true" data-filter="AT,DE,GB,FR,IT,BR,IN"></div>';
    },
    // 获取选择的国家名称（如需国家代码可修改此方法）
    valueGetter: function($el) {
      return $el.find('.bfh-selectbox-option:visible').text().trim();
    },
    // 设置默认选中的国家
    valueSetter: function($el, value) {
      $el.find('.bfh-countries').bfhcountries({ country: value });
    }
  }],
  // 确保新增规则时，国家选择器能正确初始化
  onAfterAddRule: function(rule) {
    rule.$el.find('.bfh-countries').bfhcountries();
  }
});
</script>

关键细节调整 #

• 获取国家代码而非名称：如果需要返回国家代码（如AT、DE），修改valueGetter为：

  valueGetter: function($el) {
    return $el.find('.bfh-countries').data('bfhcountries').getCountry();
  }
  

  同时valueSetter也要传入对应的国家代码。
• 限制可选国家：模板中的data-filter属性可以指定只显示你需要的国家，用逗号分隔国家代码，和你原来手动列表的国家一一对应。
• 动态初始化：QueryBuilder会动态生成规则行，所以必须在onAfterAddRule事件里重新初始化组件，否则新增规则的选择器无法正常工作。

这样就能完美把带国旗的国家选择器集成到你的QueryBuilder中了！

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