jQuery实现百度搜索框
最近项目需求,写了一个类似百度搜索框的功能。
把代码整理了一遍,然后分享出来给大家看看,如果有不对的地方请多指教。
实现效果
使用的语言:html,css,JavaScript,jQuery
代码部分
html部分:
- <div style="color: #323232; ">
- 查找:
- <input id="input"/>
- <button>搜索</button>
- <!--输入框下方的列表-->
- <ul id="ul" style="display:none;z-index: 2;">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- <!--输入框内的箭头-->
- <span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
- </div>
js部分:
- $(document).ready(function(){
- //先监听input的值变化
- document.getElementById("input").oninput=function(){
- var val = $(this).val()
- if(val!=""){
- //当input中有值 的时候显示ul列表
- $("#ul").css("display","block")
- var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
- //开始监听键盘事件
- document.onkeydown = function (e) {
- e = e || window.event;
- var code = e.keyCode //用来储存 e.keycode
- if(code==40){
- console.log("下")
- //获取ul中的li个数,使选择不会超出
- if(a<$("#ul").children("li").length){
- a++;
- //开始获取到选择中的li标签
- $("#ul").children("li").eq(a)
- }
- }else if(code==38){
- console.log("上")
- //获取ul中的li个数,使选择不会超出
- if(0<a){
- a--;//开始获取到选择中的li标签
- $("#ul").children("li").eq(a)
- }
- }else if(code==13){
- console.log("回车")
- }
- }
- }else{
- //当input中没有值的时候隐藏ul列表
- $("#ul").css("display","none")
- }
- }
- //给body添加一个点击事件来隐藏ul,使用户点击页面ul可以隐藏,不用input失去焦点是因为在选择li的时候很容易出bug
- $("body").click(function(){
- $("#ul").css("display","none")
- })
- //好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭,不然很容易出BUG
- $("#input").blur(function(){
- document.onkeydown =null
- })
- })
全部代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>jQuery实现百度搜索输入框</title>
- </head>
- <body>
- <!--
- 作者:[email protected]
- 时间:2018-08-02
- 描述:实现百度搜索输入框的功能
- -->
- <div style="color: #323232; ">
- 查找:
- <input id="input"/>
- <button>搜索</button>
- <!--输入框下方的列表-->
- <ul id="ul" style="display:none;z-index: 2;">
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
- <!--输入框内的箭头-->
- <span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
- </div>
- </body>
- <!--引入jQuery方便遍历-->
- <script src="js/jquery-3.3.1.js"></script>
- <!--开始js-->
- <script>
- $(document).ready(function(){
- //先监听input的值变化
- document.getElementById("input").oninput=function(){
- var val = $(this).val()
- if(val!=""){
- //当input中有值 的时候显示ul列表
- $("#ul").css("display","block")
- var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
- //开始监听键盘事件
- document.onkeydown = function (e) {
- e = e || window.event;
- var code = e.keyCode //用来储存 e.keycode
- if(code==40){
- console.log("下")
- //获取ul中的li个数,使选择不会超出
- if(a<$("#ul").children("li").length){
- a++;
- //开始获取到选择中的li标签
- $("#ul").children("li").eq(a)
- }
- }else if(code==38){
- console.log("上")
- //获取ul中的li个数,使选择不会超出
- if(0<a){
- a--;//开始获取到选择中的li标签
- $("#ul").children("li").eq(a)
- }
- }else if(code==13){
- console.log("回车")
- }
- }
- }else{
- //当input中没有值的时候隐藏ul列表
- $("#ul").css("display","none")
- }
- }
- //给body添加一个点击事件来隐藏ul,使用户点击页面ul可以隐藏,不用input失去焦点是因为在选择li的时候很容易出bug
- $("body").click(function(){
- $("#ul").css("display","none")
- })
- //好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭,不然很容易出BUG
- $("#input").blur(function(){
- document.onkeydown =null
- })
- })
- </script>
- </html>
相关推荐
rojyang 2020-05-20
ELEMENTS爱乐小超 2020-05-07
baynkbtg 2019-11-02
ksjlhy 2019-10-28
geminihr 2015-03-19
chang00 2015-06-17
LinSeeker 2019-09-07
nextwhy 2012-09-09
tongjianru 2011-05-18
Jarvan 2016-09-25
fadacai0 2016-04-18
deusrwvf 2017-06-21
AIOps智能运维 2015-05-25
magvwiz 2013-10-18
AIOps智能运维 2010-08-17
linqiang 2010-02-04
XSxing 2019-06-30