JQuery 自动补全 typeahead 插件

JavaScript 拖拽排序插件,可配置选项非常多

浏览器支持

预览地址:前往

https://www.liziwu.net/templates/typeahead/index.html

使用方法:

<input id="demo" type="text" autocomplete="off">
// 本地数据
$('#demo').typeahead({
  source: [
    { id: 1, name: 'Value 1' },
    { id: 2, name: 'Value 2' },
    { id: 3, name: 'Value 3' },
    ...
  ]
});
// Ajax 数据
$('#demo').typeahead({
  ajax: 'AJAX URL'
});
// 更多配置项
$('#demo').typeahead({
  // data source
  source: [],
  // how many items to display
  items: 10,
  // enable scrollbar
  scrollBar: false,
  // equalize the dropdown width
  alignWidth: true,
  // typeahead dropdown template
  menu: '<ul class="typeahead dropdown-menu"></ul>',
  item: '<li><a href="#"></a></li>',
  // The object property that is returned when an item is selected.
  valueField: 'id',
  // The object property to match the query against and highlight in the results.
  displayField: 'name',
  // auto select
  autoSelect: true,
  // callback
  onSelect: function () {
  },
  // ajax options
  ajax: {
    url: null,
    timeout: 300,
    method: 'get',
    triggerLength: 1,
    loadingClass: null,
    preDispatch: null,
    preProcess: null
  }
});

管理员

转载请注明出处!如果本博文或者本站对您(网站)的内容/素材构成侵权,请第一时间与本博主联系!

Press ESC to close