JQuery:下单菜单autocomplete加载方式说明

最新推荐文章于 2022-04-07 17:49:14 发布

原创最新推荐文章于 2022-04-07 17:49:14 发布 · 963 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#autocomplete #jquery #function #input #null

Javascript/JQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 JQuery 的 autocomplete 功能来创建一个下拉菜单。通过自定义格式化方法 `format`，实现包含英文标签的选项，并在用户选择时调用 `submitOrg` 函数。配置项包括最小字符数、最大条目数、宽度、高度等，以及各种格式化回调函数的使用方法。

//自定义格式化方法

  function format(row, customMul) {
   var s = (row.en != null && row.en != "N/A" && row.en != '')?" [" + row.en + "]":"";
   if (customMul)
       return '<input type="checkbox" id="' + row.id + '" value="' + row.cn + '" />' + row.cn + s;
   else
    return row.cn + s;
  }

//下拉单位autocomplete加载
  $("#industryorganizes").autocomplete(industryorganizesData, {
   minChars : 0, //自动完成激活之前填入的最小字符
   max : 1000, //列表里的条目数
   width : 250, //提示的宽度，溢出隐藏
   scrollHeight: 300, //提示的高度，溢出显示滚动条
   matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
   multiple : false, //多选支持
   autoFill : false,
   opt: true,
   customMultiple: true,
   maxShow: 30,

   showNum: 10,
   formatItem : function(item) { //formatItem作用在于可以格式化列表中的条目。
    return format(item, false);
   },
   formatMatch: function(item, i, max) {//formatItem作用在于可以格式化列表中的条目。
    return item.cn;
   },
   formatResult: function(item) {//formatResult是定义最终返回的数据，比如我们要返回原始数据，而不是formatItem过的数据。
    return item.cn;
   }
  }).result(function(e, item) {

   //调用自定义方法
   submitOrg(item.id);
  });