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=