建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

自动补全搜索内容的 JQuery插件autocomplete.js

来源:易助科技网浏览量:16收藏

简介


autocomplete.js 是一款轻量级 JQuery 插件,高度自定义,可以改进搜索功能,搜索框输入时,可以智能补全搜索内容。


自动补全搜索内容的 JQuery插件autocomplete.js-示例图



使用


1.  引入 JQuery 和 autocomplete.js 文件


2.  HTML


<input type="text" name="country" id="autocomplete"/>


3.  调用


Ajax 查找


$('#autocomplete').autocomplete({
  serviceUrl: '/autocomplete/countries',
  onSelect: function (suggestion) {
    alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  }
});


本地查找 (没有 Ajax):


var countries = [
  { value: 'Andorra', data: 'AD' },// ... 
  { value: 'Zimbabwe', data: 'ZZ' }
]; 

$('#autocomplete').autocomplete({
  lookup: countries,
  onSelect: function (suggestion) {
    alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  }
});


自定义查找函数


$('#autocomplete').autocomplete({
  lookup: function (query, done) {
    // Do Ajax call or lookup locally, when done,
    // call the callback and pass your results:
    var result = {
      suggestions: [
        { "value": "United Arab Emirates", "data": "AE" },
        { "value": "United Kingdom",       "data": "UK" },
        { "value": "United States",        "data": "US" }
      ]
    };
    done(result);
  },
  onSelect: function (suggestion) {
    alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  }
});



相关链接


官网地址 : http://autocomplete-js.com/

官方文档 :  https://tarekraafat.github.io/autoComplete.js/#/

GitHub 地址 :  https://github.com/autocompletejs/autocomplete.js

在线演示地址 :https://www.jq22.com/yanshi12967