jQWidgets jqxComboBox 完整参考

介绍

jQWidgets jqxComboBox 是一个多功能的下拉框组件，它支持以下特性：

• 支持多项选择
• 自适应宽度
• 多列显示
• 自定义模板
• 远程数据加载
• 自动完成
• 等等

本文将详细介绍 jQWidgets jqxComboBox 的所有性质，以及使用该组件的最佳实践方法。

安装

使用 jQWidgets jqxComboBox 之前，需要先引入必要的依赖文件。以下是引入方式：

<!-- 引入 jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-n/5+eu2OBkQhnCJL5ZBkE8jzX1pKF5kNblmCfoO/1zkons0y2Ji6GkZnUQcPvcRmYnh4JZ0KVDhc30dM33eN3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- 引入 jQWidgets 核心文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqwidgets/styles/jqx.base.css" integrity="sha512-aAFp764piIhq+RNPCZ6nMKhyaq3X9pD4l4ye4/Gntvc2QwLFgRfEAlQdcz/kZUpCphG5arX9akM5zt/xwx5BAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqwidgets/jqxcore.js" integrity="sha512-TcvVxn2SG0f9TstWFFP8bKY7xYLE0q3Og7mHr8rZnV7LEuBn9bV7sMc8cOIbVnqam3Ciff3E7Jyy8Ffdqqp7ow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- 引入 jQWidgets jqxComboBox 文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqwidgets/styles/jqx.darkblue.css" integrity="sha512-3JXmMF4tvop4vGByNFcRR0f6ELVJZLJkiASWoLjFLf/kEagRXWRXnzJ02NNx5eTDJRwrr5D+TG5kSbS+cZ6LqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.2/jqwidgets/jqxcombobox.js" integrity="sha512-3DXpJ3G1zGYec+t7vZxtNgeohkUU9YZ8CQEPmytztEdtgwOJ1tjCb/fRPzIYCpIJMJSxdEo7KX90I8Q2ix20DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

基本用法

最简单的用法是通过 <select> 标签生成，然后调用 JQWidgets 的初始化方法即可得到一个 jQWidgets jqxComboBox 组件。以下是这个过程：

<select id="jqxComboBox">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<script>
  $(function() {
    $('#jqxComboBox').jqxComboBox();
  });
</script>

如上，我们引入了依赖文件，然后通过一个 <select> 标签生成了一个 jQWidgets jqxComboBox 组件，并初始化了该组件。效果如下：

可以看到，jQWidgets jqxComboBox 组件基本能够满足我们绝大部分的下拉框需求。接下来，我们将进一步了解它的高级特性。

多项选择

jQWidgets jqxComboBox 组件支持多项选择。我们只需要在初始化选项中设置 multiSelect 为 true 即可开启这个功能。以下是演示代码：

<select id="jqxComboBox2">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
  <option value="5">选项五</option>
  <option value="6">选项六</option>
</select>

<script>
  $(function() {
    $('#jqxComboBox2').jqxComboBox({
      multiSelect: true
    });
  });
</script>

效果如下：

可以看到，我们在初始化选项中设置了 multiSelect: true，开启了多项选择功能。

多列显示

jQWidgets jqxComboBox 组件支持多列显示。我们只需要在初始化选项中设置 displayMember 和 valueMember 即可实现。以下是演示代码：

<select id="jqxComboBox3">
  <option value="1">选项一-1</option>
  <option value="2">选项二-1</option>
  <option value="3">选项三-1</option>
  <option value="4">选项四-1</option>
  <option value="5">选项五-1</option>
  
  <option value="11">选项一-2</option>
  <option value="22">选项二-2</option>
  <option value="33">选项三-2</option>
  <option value="44">选项四-2</option>
  <option value="55">选项五-2</option>
</select>

<script>
  $(function() {
    $('#jqxComboBox3').jqxComboBox({
      displayMember: 'title',
      valueMember: 'value',
      source: [
        { title: '#1-选项一', value: 1 },
        { title: '#1-选项二', value: 2 },
        { title: '#1-选项三', value: 3 },
        { title: '#1-选项四', value: 4 },
        { title: '#1-选项五', value: 5 },
        { title: '#2-选项一', value: 11 },
        { title: '#2-选项二', value: 22 },
        { title: '#2-选项三', value: 33 },
        { title: '#2-选项四', value: 44 },
        { title: '#2-选项五', value: 55 }
      ]
    });
  });
</script>

效果如下：

可以看到，我们设置了 displayMember: 'title' 和 valueMember: 'value'，并指定每一项的值和显示文本。这样就实现了多列显示。

自定义模板

jQWidgets jqxComboBox 组件支持自定义模板。我们可以根据自己的需求来定义下拉框每一项的 HTML 结构。以下是演示代码：

<select id="jqxComboBox4">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
  <option value="5">选项五</option>
  <option value="6">选项六</option>
</select>

<script>
  $(function() {
    $('#jqxComboBox4').jqxComboBox({
      renderSelectedItem: function(index, item) { 
        return `<div style="display: flex; align-items: center;"><img src="./images/icon-${index}.svg" style="width: 20px; height: 20px; margin-right: 8px;"><span>${item.label}</span></div>`;
      }
    });
  });
</script>

效果如下：

可以看到，我们通过 renderSelectedItem 方法定义了每一项的 HTML 结构，包括图标和文本。

远程数据加载

jQWidgets jqxComboBox 组件支持从远程加载数据。我们只需要在初始化选项的 source 中设置请求 URL 即可实现。以下是演示代码：

<select id="jqxComboBox5">
</select>

<script>
  $(function() {
    $('#jqxComboBox5').jqxComboBox({
      width: '200px',
      height: '25px',
      source: function (query, response) {
          $.ajax({
              url: './data.json',
              dataType: 'json',
              success: function (data) {
                  response(data);
              }
          });
      },
      displayMember: 'label', 
      valueMember: 'value'
    });
  });
</script>

可以看到，我们通过 source 方法来从 data.json 文件加载数据。在这个例子中，我们从本地加载了一个 JSON 文件。当然，也可以使用远程接口。

自动完成

jQWidgets jqxComboBox 组件支持自动完成功能。我们只需要在初始化选项中设置 autoComplete 为 true 即可实现。以下是演示代码：

<select id="jqxComboBox6">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
  <option value="5">选项五</option>
  <option value="6">选项六</option>
</select>

<script>
  $(function() {
    $('#jqxComboBox6').jqxComboBox({
      autoComplete: true
    });
  });
</script>

效果如下：

可以看到，在输入框中输入一个字符就会出现提示。这就是自动完成功能。

总结

至此，我们已经学习了 jQWidgets jqxComboBox 组件的所有性质以及用法。通过对这些性质的深入了解，你可以轻松地创建各种类型的下拉框，并为其添加不同的样式和行为。如果你有需要，也可以参考文档自行探索一下 jQWidgets jqxComboBox 的更多用法。