个人网站创建百度搜索框

本文介绍了如何在个人网站上实现百度搜索功能。当输入框内容变化时,通过jsonp跨域请求获取百度suggestion数据,并实时显示。用户可以点击或使用键盘上下键选择建议项,回车执行搜索。当输入框失去焦点,会清除suggestion列表。
摘要由CSDN通过智能技术生成

需求分析

  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
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值