可输入文字查找ajax下拉框控件 ComBox的实现方法

下面是关于“可输入文字查找ajax下拉框控件 ComBox的实现方法” 的完整攻略。

1. 使用jQuery UI Autocomplete组件实现

jQuery UI Autocomplete组件是一个强大的搜索框组件，支持可输入文字查找，可以方便地实现ajax下拉框控件 ComBox。下面是一个使用示例：

HTML代码

<label for="input">输入关键词：</label>
<input id="input" type="text" />

JavaScript代码

$(function() {
  $( "#input" ).autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: "your-api-url",
        dataType: "jsonp",
        data: {
          term: request.term
        },
        success: function( data ) {
          response( data );
        }
      });
    },
    minLength: 2
  });
});

上面的代码中，关键函数是autocomplete。其中，source参数指定了数据来源，minLength参数指定了最少输入的字符数。更多的参数说明，请参考jQuery UI Autocomplete官方文档。

2. 使用Select2插件实现

Select2是一个非常流行的下拉框插件，支持下载数据、支持可输入文字查找等特性，也可以方便地实现ajax下拉框控件 ComBox。下面是一个使用示例：

HTML代码

<label for="select2">输入关键词：</label>
<select id="select2" style="width: 300px"></select>

JavaScript代码

$(function() {
  $("#select2").select2({
    ajax: {
      url: "your-api-url",
      dataType: "json",
      delay: 250,
      data: function (params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 1,
    placeholder: '请输入关键词'
  });
});

上面的代码中，关键函数是select2。其中，ajax参数指定了数据来源，minimumInputLength参数指定了最少输入的字符数。

更多的参数说明，请参考Select2官方文档。

通过以上这两条方法的学习，你应该可以方便地实现可输入文字查找ajax下拉框控件 ComBox 了。