查找: 查找:

使用jQuery实现百度搜索框

发表时间: 2018-08-04 12:33

最近项目需求,写了一个类似百度搜索框的功能。

把代码整理了一遍,然后分享出来给大家看看,如果有不对的地方请多指教。

实现效果

使用的语言:html,css,JavaScript,jQuery

代码部分

html部分:


  1. <div style="color: #323232; ">
  2. 查找:
  3. <input id="input"/>
  4. <button>搜索</button>
  5. <!--输入框下方的列表-->
  6. <ul id="ul" style="display:none;z-index: 2;">
  7. <li>1</li>
  8. <li>2</li>
  9. <li>3</li>
  10. </ul>
  11. <!--输入框内的箭头-->
  12. <span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
  13. </div>

js部分:


  1. $(document).ready(function(){
  2. //先监听input的值变化
  3. document.getElementById("input").oninput=function(){
  4. var val = $(this).val()
  5. if(val!=""){
  6. //当input中有值 的时候显示ul列表
  7. $("#ul").css("display","block")
  8. var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
  9. //开始监听键盘事件
  10. document.onkeydown = function (e) {
  11. e = e || window.event;
  12. var code = e.keyCode //用来储存 e.keycode
  13. if(code==40){
  14. console.log("下")
  15. //获取ul中的li个数,使选择不会超出
  16. if(a<$("#ul").children("li").length){
  17. a++;
  18. //开始获取到选择中的li标签
  19. $("#ul").children("li").eq(a)
  20. }
  21. }else if(code==38){
  22. console.log("上")
  23. //获取ul中的li个数,使选择不会超出
  24. if(0<a){
  25. a--;//开始获取到选择中的li标签
  26. $("#ul").children("li").eq(a)
  27. }
  28. }else if(code==13){
  29. console.log("回车")
  30. }
  31. }
  32. }else{
  33. //当input中没有值的时候隐藏ul列表
  34. $("#ul").css("display","none")
  35. }
  36. }
  37. //给body添加一个点击事件来隐藏ul,使用户点击页面ul可以隐藏,不用input失去焦点是因为在选择li的时候很容易出bug
  38. $("body").click(function(){
  39. $("#ul").css("display","none")
  40. })
  41. //好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭,不然很容易出BUG
  42. $("#input").blur(function(){
  43. document.onkeydown =null
  44. })
  45. })

全部代码:


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQuery实现百度搜索输入框</title>
  6. </head>
  7. <body>
  8. <!--
  9. 作者:380012546@qq.com
  10. 时间:2018-08-02
  11. 描述:实现百度搜索输入框的功能
  12. -->
  13. <div style="color: #323232; ">
  14. 查找:
  15. <input id="input"/>
  16. <button>搜索</button>
  17. <!--输入框下方的列表-->
  18. <ul id="ul" style="display:none;z-index: 2;">
  19. <li>1</li>
  20. <li>2</li>
  21. <li>3</li>
  22. </ul>
  23. <!--输入框内的箭头-->
  24. <span id="jiantou" style="padding:10px 20px 10px 20px;margin-left: -200px; background-image: url();background-repeat: no-repeat; background-position: center;"></span>
  25. </div>
  26. </body>
  27. <!--引入jQuery方便遍历-->
  28. <script src="js/jquery-3.3.1.js"></script>
  29. <!--开始js-->
  30. <script>
  31. $(document).ready(function(){
  32. //先监听input的值变化
  33. document.getElementById("input").oninput=function(){
  34. var val = $(this).val()
  35. if(val!=""){
  36. //当input中有值 的时候显示ul列表
  37. $("#ul").css("display","block")
  38. var a = -1 //设置一个变量 用来控制键盘上下键选中的li标签
  39. //开始监听键盘事件
  40. document.onkeydown = function (e) {
  41. e = e || window.event;
  42. var code = e.keyCode //用来储存 e.keycode
  43. if(code==40){
  44. console.log("下")
  45. //获取ul中的li个数,使选择不会超出
  46. if(a<$("#ul").children("li").length){
  47. a++;
  48. //开始获取到选择中的li标签
  49. $("#ul").children("li").eq(a)
  50. }
  51. }else if(code==38){
  52. console.log("上")
  53. //获取ul中的li个数,使选择不会超出
  54. if(0<a){
  55. a--;//开始获取到选择中的li标签
  56. $("#ul").children("li").eq(a)
  57. }
  58. }else if(code==13){
  59. console.log("回车")
  60. }
  61. }
  62. }else{
  63. //当input中没有值的时候隐藏ul列表
  64. $("#ul").css("display","none")
  65. }
  66. }
  67. //给body添加一个点击事件来隐藏ul,使用户点击页面ul可以隐藏,不用input失去焦点是因为在选择li的时候很容易出bug
  68. $("body").click(function(){
  69. $("#ul").css("display","none")
  70. })
  71. //好啦最后别忘了失去键盘焦点的时候要把键盘监听事件关闭,不然很容易出BUG
  72. $("#input").blur(function(){
  73. document.onkeydown =null
  74. })
  75. })
  76. </script>
  77. </html>