使用 Bootstrap 设计的简单自动完成插件

版本:

浏览量:1101

最后更新：2021-09-06

应用标签：git Jquery插件 MAC 软件

推荐指数:

查看演示点击下载

详细信息

一个多功能且与Bootstrap兼容的自动完成 jQuery 插件，支持静态和动态数据源（json 格式的响应）。

如何使用它：

1. 在 jQuery 之后加载自动完成插件的缩小版本。

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- <a href="https://www.jqueryscript.net/tags.php?/autocomplete/">Autocomplete</a> plugin -->
<script src="autocomplete.min.js"></script>

2. 将自动完成功能附加到输入字段并确定数据源（可以是数组或对象），如下所示：

<input class="autocomplete-input" />

$('.autocomplete-input').autocomplete({
  // source: ['Value 1', 'Value 2', 'Value 3']
  source: [
    {
      value: 'v1',
      label: 'Value 1',
      extradata: 'jQuery1' // optional
    },
    {
      value: 'v2',
      label: 'Value 2',
      extradata: 'jQuery2'
    },
    {
      value: 'v3',
      label: 'Value 3',
      extradata: 'jQuery3'
    }
    // ...
  ]
})

3. 从外部数据源加载自动完成项目。

$('.autocomplete-input').autocomplete({
  source: '/path/to/data/',
  // or
  source: function (request, response) {
    var ajaxOpt = {url: 'data.php', data:{term: request.term}};
    $.ajax(ajaxOpt).done(function (data) {
      response(data);
    });
  }
})

4. 自定义自动完成列表的下拉模板。

$('.autocomplete-input').autocomplete({
  render<a href="https://www.jqueryscript.net/menu/">Menu</a>: function (menu, item) {
    return $('<a href="javascript: void(0)" />')
      .addClass('dropdown-item text-wrap')
      .data('data', item)
      .html(item.label || item.value)
      .appendTo(menu)
    ;
  },
})

5.自定义匹配器功能。设置为 false 将禁用默认匹配器。

$('.autocomplete-input').autocomplete({
 
  matcher: function (rowData, search, cb) {
    var text = (rowData.label || rowData.text || rowData.value).toUpperCase();
    if (text.indexOf(search.toUpperCase()) > -1) {
      return cb(true);
    }
    cb(false);
  },
 
})

6. 更多插件选项。

$('.autocomplete-input').autocomplete({
 
  // minimum number of characters to trigger the autocomplete list
  minLength: 1,
 
  // time to wait before displaying the autocomplete list
  delay: 300,
 
  // CSS z-index property
  zIndex: 100,
 
  // auto set focus on the first matched item
  autoFocus: false,
 
  // ignore keys
  ignoreKeys: Default: '|9|16|17|18|19|33|34|35|36|37|39|45|144|145|',
   
})

7. API 方法。

// Get option
$('.autocomplete-input').autocomplete('option', 'matcher');
 
// Set option
$('.autocomplete-input').autocomplete('option', 'matcher', false);
 
// Run function
$('.autocomplete-input').autocomplete('show');
$('.autocomplete-input').autocomplete('search', 'searchfor');

8. 事件。

$('.autocomplete-input').autocomplete({
  // ...
})
.on('autocomplete.preselect', function (event, data, jItem) {
  // do somthing
})
.on('autocomplete.select', function (event, data, jItem) {
  // do somthing
  console.info(data.value)
  console.info(data.label)
  console.info(data.extradata)
});

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码