easyui combox用法

EasyUI 的 ComboBox 是一个下拉框组件，支持远程数据加载和搜索功能，使用起来很方便。

以下是 ComboBox 的基本用法：

1. 引入 EasyUI 的 CSS 和 JS 文件。

<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>

2. 创建一个 select 元素，并将其转换为 ComboBox。

<select id="my-combobox">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

$('#my-combobox').combobox();

3. 如果需要加载远程数据，可以通过设置 url 属性实现。

<select id="my-remote-combobox"></select>

$('#my-remote-combobox').combobox({
  url: '/getData',
  valueField: 'id',
  textField: 'name'
});

其中，`url` 属性指定了远程数据的地址，`valueField` 属性指定了选项的值字段，`textField` 属性指定了选项的显示字段。

4. 如果需要启用搜索功能，可以通过设置 hasDownArrow 属性实现。

$('#my-search-combobox').combobox({
  hasDownArrow: false,
  mode: 'remote',
  url: '/searchData',
  valueField: 'id',
  textField: 'name'
});

其中，`hasDownArrow` 属性设置为 `false`，表示隐藏下拉箭头，`mode` 属性设置为 `remote`，表示启用远程搜索。搜索时会将输入的内容发送到服务器，然后根据返回的数据进行匹配。服务器返回的数据格式如下：

[
  { "id": 1, "name": "Option 1" },
  { "id": 2, "name": "Option 2" },
  { "id": 3, "name": "Option 3" }
]

以上就是 EasyUI ComboBox 的基本用法。除此之外，还有很多其他属性和事件可以使用，具体可以参考 EasyUI 的官方文档。