使用ajax请求combobox控件

本文将从以下几个方面，详细阐述使用ajax请求combobox控件：

一、实现combobox控件基础功能

1、在前端页面上实现一个combobox控件，使用html代码如下：

<select id="myCombobox">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

2、使用jQuery将这个select控件转化为combobox控件，可用插件包括jQuery UI、Bootstrap等。以jQuery UI为例，代码如下：

$( "#myCombobox" ).combobox();

3、基础功能实现后，即可进行ajax请求。

二、使用ajax请求获取combobox数据源

1、在服务端编写一个接口，用于提供combobox所需的数据源。例如，从数据库查询数据，返回数据格式如下：

{
  "data": [
    {
      "id": 1,
      "name": "选项1"
    },
    {
      "id": 2,
      "name": "选项2"
    },
    {
      "id": 3,
      "name": "选项3"
    }
  ]
}

2、在前端使用ajax请求获取数据源并动态生成combobox选项，代码如下：

$.ajax({
  url: "/getData",  //后端提供的接口路径
  type: "GET",
  dataType: "json",
  success: function(data) {
    var select = $( "#myCombobox" );
    $.each(data.data, function(id, name) {
      select.append('' + name + '');
    });
  },
  error: function() {
    alert("获取数据源失败！");
  }
});

三、使用ajax请求实现combobox选项联动

1、在前端页面上创建两个combobox控件，一个用于选择省份、一个用于选择城市。html代码如下：

<select id="provinceCombobox">
  <option value="1">省份1</option>
  <option value="2">省份2</option>
  <option value="3">省份3</option>
</select>

<select id="cityCombobox">
  <option value="1">城市1</option>
  <option value="2">城市2</option>
  <option value="3">城市3</option>
</select>

2、在后端编写两个接口，一个用于获取省份数据源、一个用于根据选中省份获取城市数据源。数据源格式如下：

//省份数据源
{
  "data": [
    {
      "id": 1,
      "name": "省份1"
    },
    {
      "id": 2,
      "name": "省份2"
    },
    {
      "id": 3,
      "name": "省份3"
    }
  ]
}

//城市数据源
{
  "data": [
    {
      "id": 1,
      "name": "城市1"
    },
    {
      "id": 2,
      "name": "城市2"
    },
    {
      "id": 3,
      "name": "城市3"
    }
  ]
}

3、在前端使用ajax请求获取省份数据源，动态生成省份combobox选项。当选择省份后，使用ajax请求获取对应城市数据源，动态生成城市combobox选项。代码如下：

//获取省份数据源
$.ajax({
  url: "/getProvinceData",
  type: "GET",
  dataType: "json",
  success: function(data) {
    var select = $( "#provinceCombobox" );
    $.each(data.data, function(id, name) {
      select.append('' + name + '');
    });
  },
  error: function() {
    alert("获取省份数据源失败！");
  }
});

//根据选中省份获取城市数据源并动态生成城市combobox选项
$( "#provinceCombobox" ).on( "comboboxchange", function( event, ui ) {
  var provinceId = ui.item.value;
  $.ajax({
    url: "/getCityData", //后端提供的接口路径
    type: "GET",
    data: { provinceId: provinceId },
    dataType: "json",
    success: function(data) {
      var select = $( "#cityCombobox" );
      select.empty();
      $.each(data.data, function(id, name) {
        select.append('' + name + '');
      });
    },
    error: function() {
      alert("获取城市数据源失败！");
    }
  });
});

四、使用ajax请求实现combobox选项搜索

1、在前端页面上给combobox添加搜索框，使用html代码如下：

<input id="searchInput">
<select id="searchCombobox">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

2、在后端编写一个接口，用于根据关键字搜索combobox数据源并返回结果。结果数据源格式同第二点。

3、在前端使用ajax请求根据关键字搜索combobox数据源，并动态生成搜索结果combobox选项。代码如下：

$( "#searchInput" ).on( "input", function() {
  var keyword = $(this).val();
  $.ajax({
    url: "/searchData", //后端提供的接口路径
    type: "GET",
    data: { keyword: keyword },
    dataType: "json",
    success: function(data) {
      var select = $( "#searchCombobox" );
      select.empty();
      $.each(data.data, function(id, name) {
        select.append('' + name + '');
      });
    },
    error: function() {
      alert("搜索数据源失败！");
    }
  });
});