个人网站创建百度搜索框

需求分析

  1. 点击提交按钮或者按回车键时,将输入框中的内容作为关键字进行百度搜索,在新的页面显示搜索结果。
  2. 当输入框中的内容变更时,将输入框中的内容作为关键字,用jsonp跨域请求的方式获取百度的suggestion数据,实时显示出来。
  3. 当鼠标移动到对应的suggestion项上时,该项高亮,并将输入框中的内容更新为该suggestion的内容。此时点击鼠标或者按回车键时,执行搜索操作。
  4. 也可以按键盘上下键来选取对应的suggestion项,按回车键执行搜索操作。注意设置suggestion列表为循环结构,即在最后一项时按下键选中第一项,在第一项时按上键选中最后一项。
  5. 当输入框失去焦点时,删除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

你可能感兴趣的:(小项目,js,jsonp,suggestion,百度,跨域请求)