Asp.Net Core 3.1中如何通过Ajax实现搜索框输入短语返回5个相似提示短语

分场景最优选型 #

• 小型项目（日活<10万，词库规模<10万条）：用轻量前缀匹配方案即可
  前端先加200-300ms的输入防抖，避免无效请求，用户输入停下后再把关键词传给后端。后端词库可以存在Redis有序集合中，用前缀范围查询直接拉取结果，示例命令：ZRANGEBYLEX suggest_zset [关键词 (关键词\xff LIMIT 0 5，毫秒级返回，足够支撑小流量场景。如果没有Redis，也可以把词库存MySQL，给关键词字段加前缀索引，查询时用SELECT keyword FROM suggest_table WHERE keyword LIKE '输入关键词%' LIMIT 5即可。
• 中大型项目（日活≥10万，词库规模≥100万条）：用专门的搜索引擎实现
  直接用Elasticsearch的Completion Suggester内置功能，这是专门为搜索联想场景优化的组件，性能远高于普通前缀匹配，还支持自定义权重排序、拼写纠错、模糊匹配等扩展能力，可以配置为按搜索热度排序，把用户高频查询的结果（比如你示例中的ram 16、ram 8）排在前面，冷门结果（比如rampal）靠后，体验更好。如果需要支持非前缀的模糊匹配（比如用户输入am也能返回ram相关结果），可以搭配Ngram分词实现。
• 纯前端离线场景：如果词库规模很小（<1万条），可以直接把全量词库存在前端本地，输入时用JS做前缀过滤，完全不用发请求，响应速度最快。

核心优化点 #

• 前端必须加防抖逻辑，连续输入时不发请求，能减少70%以上的无效请求，250ms的防抖时长用户感知不到延迟，体验最优。
• 联想结果优先按搜索热度排序，不要默认按字典序排序，实用性会高很多。
• 热门关键词的联想结果可以加Redis缓存，缓存时长1-24小时可根据业务更新频率调整，避免每次请求都查存储层。
• 前端展示时把和用户输入匹配的部分高亮，比如用户输入ram，返回结果展示为ram 4、ram 8，用户识别效率更高。

前端防抖示例代码 #

let searchTimer = null
const searchInput = document.querySelector('#search-input')
const suggestWrap = document.querySelector('#suggest-wrap')

searchInput.addEventListener('input', function(e) {
  const keyword = e.target.value.trim()
  // 空输入清空联想列表
  if (!keyword) {
    suggestWrap.innerHTML = ''
    clearTimeout(searchTimer)
    return
  }
  // 清理上一次的延时请求
  clearTimeout(searchTimer)
  // 250ms防抖后发起请求
  searchTimer = setTimeout(async () => {
    const res = await fetch(`/api/suggest?keyword=${encodeURIComponent(keyword)}`)
    const suggestList = await res.json()
    // 只取前5条展示
    renderSuggestList(suggestList.slice(0, 5))
  }, 250)
})

// 渲染联想列表方法可根据业务自行实现
function renderSuggestList(list) {
  suggestWrap.innerHTML = list.map(item => `<div class="suggest-item">${item}</div>`).join('')
}

内容的提问来源于stack exchange，提问作者sunboy_sunboy