需求分析
- 点击提交按钮或者按回车键时,将输入框中的内容作为关键字进行百度搜索,在新的页面显示搜索结果。
- 当输入框中的内容变更时,将输入框中的内容作为关键字,用jsonp跨域请求的方式获取百度的suggestion数据,实时显示出来。
- 当鼠标移动到对应的suggestion项上时,该项高亮,并将输入框中的内容更新为该suggestion的内容。此时点击鼠标或者按回车键时,执行搜索操作。
- 也可以按键盘上下键来选取对应的suggestion项,按回车键执行搜索操作。注意设置suggestion列表为循环结构,即在最后一项时按下键选中第一项,在第一项时按上键选中最后一项。
- 当输入框失去焦点时,删除suggestion列表。
代码实现
*1. 基本组件
<div>
<input id="input_search" type="text" oninput="getSuggestion()" onblur="hiddenSuggestion()" onkeydown="move(event)">
<div id="suggestion" hidden="hidden">
<ul id="suggestionUl"></ul>
</div>
</div>
<div>
<input type="button" value="Search" onclick="search()">
</div>
*2. 输入框内容变化时调用getSuggestion方法
function getSuggestion