9、构建实时搜索应用与HTML5 API探索

构建实时搜索应用与HTML5 API探索

实时搜索应用开发

搜索结果显示与导航

代码会在 SearchStore 发出新数据时调用 getSearchResults 函数，该函数会将最多五个结果存储在组件状态中。当输入内容时，搜索框下方会弹出包含结果的列表组，可使用鼠标悬停并点击结果访问相应链接。

为了支持使用箭头键导航搜索结果，需进行以下操作：
1. 打开 search.jsx 文件，在 getInitialState 中添加 activeIndex: -1 。
2. 在 renderQuickSearch 函数中，添加 className 相关代码：

renderQuickSearch() {
  return this.state.results.map((result, idx) => {
    if (idx < 5) {
      return (
        <ListGroupItem
          key={"f" + idx}
          className={this.state.activeIndex === idx ? "list-group-item-success" : ""}
          onClick={this.handleClick.bind(null, idx)}
          he