今天搞个“实时搜索”的功能，也叫Live Search，折腾一阵子，跟大家唠唠过程。
起因是之前的搜索框太死板，非得按个钮才能搜，用户体验贼差。领导说要不咱们也搞个像现在流行的那种，一边打字，底下结果就跟着出来的效果？我想想，行，那就动手呗。
第一步，先琢磨怎么实现。 脑子里第一个蹦出来的就是AJAX。就是前端页面不用整个刷新，悄悄地跟后台服务器通个信，把用户输的东西传过去，后台查到再把结果送回来，前端再把结果塞到页面里。大概思路就这样。
开始动手搞前端。 先在页面上放个普通的输入框 ``。关键是得知道用户啥时候输入东西。一开始想用 `onkeyup` 事件，就是键盘按键抬起来的时候触发。后来发现 `oninput` 事件好像更好使，它在输入框内容变的时候就触发，不管是敲键盘、粘贴还是别的啥操作。行，就用 `oninput`。
然后是写JavaScript脚本。 在 `oninput` 事件触发的时候，就用JS去拿到输入框里当前的文字。拿到文字后，就该轮到AJAX出场。创建一个XMLHttpRequest对象（或者用现在更方便的 `fetch` API），把拿到的文字作为参数，发送一个请求给后台的处理脚本。这里得注意，是异步请求，不能让页面卡住等后台响应。
后台处理部分。 我这边后台用的是PHP，比较熟。就写个简单的PHP脚本。这个脚本接收前端传过来的搜索关键词。拿到关键词后，主要工作就是去数据库里查。数据库里存着一堆数据嘛就用 `SELECT` 语句去捞。最简单的就是用 `LIKE '%关键词%'` 来模糊匹配。比如用户输入“实”，我就去数据库里找所有包含“实”的数据。
数据返回和前端展示。 后台PHP查到数据后，不能直接一股脑全扔给前端。一般是整理成一种通用的格式，比如JSON。我把查到的结果打包成JSON字符串，然后 `echo` 出来。前端的AJAX在收到后台响应后（就是那个回调函数里），就拿到这个JSON字符串，把它解析成JS能懂的对象或数组。然后，动态地在输入框下面创建列表项 `
- ` 专门放这些结果。
- 请求太频繁： 用户打字很快，比如打“实时搜索”四个字，可能瞬间就触发好几次 `oninput` 事件，发好几个AJAX请求。这对服务器压力挺大的，而且也没必要。后来加个“防抖”（debounce）处理。简单说就是，用户输入后，等个一小段时间（比如300毫秒），如果这段时间没再输入，才真正发请求去后台查。这样能大大减少无效请求。
- 后台查询效率： 如果数据量特别大，那个 `LIKE '%关键词%'` 的查询会变得很慢，因为它没法很好地利用数据库索引。这个就得看情况优化，比如是不是可以只用 `LIKE '关键词%'`（只匹配开头），或者引入更专业的搜索引擎技术，那就复杂。目前数据量不大，暂时先这样顶着。
- 结果展示： 结果怎么显示也得琢磨下。是直接替换掉旧结果，还是追加？怎么处理“没有找到结果”的情况？用户点击结果后输入框要不要填上选中的内容？这些细节都得考虑进去，不然用户用着还是别扭。我这边是每次都清空旧结果，显示新结果，然后加个“无匹配结果”的提示。
- 错误处理： 网络不好或者后台脚本出错咋办？AJAX请求可能会失败。这个也得处理，比如给用户个提示“搜索出错，请稍后再试”。
踩坑和调整
看着挺顺畅，实际搞起来遇到不少小麻烦：
的效果。 经过这么一番折腾和调整，这个实时搜索功能总算是跑起来。用户在输入框里打字，下面就能即时看到相关的建议或结果，体验确实比以前那个傻等按钮的好多。虽然中间解决各种小问题也花不少功夫，但看到最终效果，感觉这力气没白费。技术本身不难，就是要把细节做让用户用得舒服。
还没有评论，来说两句吧...