友情关注：2021年底即将推出我们墨飞鱼团队历时大半年研发的灵感写作平台，将会为微信读书的用户提供免费的笔记素材整理工具，借助全球领先的NLP AI模型与百万金句素材数据库，助力您的写作灵感火花不断， 敬请收藏关注这个地址，12月底见哦~

比较优秀的一个Autocomplete框架看一下
使用很简单，3步走

页面input元素id设置一下，比如id=autocomplete，然后页面上引用相关的js及css文件

 <input type="search" name="search-field" id="autocomplete" placeholder="Search Blog" required="">

js中定义Autocomplete的数据来源及行为配置

    // Initialize autocomplete with ajax service
    $('#autocomplete').devbridgeAutocomplete({
        serviceUrl: '/html/ncl-search',
        minChars: 1,
        onSelect: function (suggestion) {
            $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);
        },
        showNoSuggestionNotice: true,
        noSuggestionNotice: 'Sorry, no matching results',
        maxHeight: '600',
        groupBy: 'category'
    });

后台数据源与elasticsearch连接，能为serviceUrl/html/ncl-search的调用返回正确的数据格式

需要注意返回的数据格式有以下两种，如果格式错误的话页面是无法显示正确效果的

不需要group显示效果的

{
  "query": "Unit",
  "suggestions": [
    {
      "value": "United Arab Emirates",
      "data":  "NBA"
    },
    {
      "value": "United Kingdom",
      "data": "NBA"
    },
    {
      "value": "United States",
      "data":"NBA"
    }
  ]
}

有group显示效果的，就是本篇调用中所使用的数据格式

{
  "query": "Unit",
  "suggestions": [
    {
      "value": "United Arab Emirates",
      "data":  { "category": "NBA" }
    },
    {
      "value": "United Kingdom",
      "data":  { "category": "NBA" }
    },
    {
      "value": "United States",
      "data": { "category": "NBA" }
    }
  ]
}