Ajax实现搜索提示框~超级详细

最新推荐文章于 2023-01-05 13:37:11 发布

weixin_46370867

最新推荐文章于 2023-01-05 13:37:11 发布

阅读量1.6k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46370867/article/details/111086975

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

以下是对Ajax搜索提示框的整理，希望可以帮助到有需要的小伙伴~

文章目录

静态页面

搜索框 input

提示框无序列表加容器 div 做样式【默认不显示】

<div class="container">
  <!-- 搜索框 -->
  <input type="text" id="search" />
  <!-- 提示框 -->
  <div class="alter">
    <ul></ul>
  </div>
</div>

用户的操作是用事件来处理的

用户输入事件 – 用户在搜索框中打字，键盘事件或用户输入 input 事件都可以

【提示框默认是不显示的，用户在搜索框输入内容后才显示提示框】

提示框：隐藏切换到显示或者显示的时候创建一个提示框

提示框中的内容会实时变化，要用到异步交互。由文本框输入事件触发

/*
            捕获用户输入行为
            1. 绑定键盘事件 - keydown、keyup、keypress
            2. 绑定输入事件 -> input
        */
$("#search")
  .bind("input", function (event) {
    $(".alter>ul").empty();
    console.log("this is input");
    // 1.根据用户输入的内容，动态获取相关提示数据
    var inputValue = $(this).val(); // val() 方法返回或设置被选元素的值。
    $.getJSON("data/server4.json", function (data) {
      // console.log(data);
      $.each(data, function (index, obj) {
        var name = obj.name;
        if (name.indexOf(inputValue) >= 0) {
          var value = obj.value;
          $.each(value, function (index, text) {
            $(".alter>ul").append($("<li>" + text + "</li>"));
          });
        }
      });
    });
    // 获取焦点
    // 2.将提示框从隐藏状态切换到显示状态
    $(".alter").css("display", "block");
  })
  .bind("blur", function () {
    // 取消焦点 - 将提示框从显示状态切换到隐藏状态
    $(".alter").css("display", "none");
  });

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索提示框</title>
    <style>
        .container #search {
            width: 300px;
        }

        .container .alter {
            width: 305px;
            border: 1px solid #333;
            /* 提示框默认隐藏 */
            display: none;
        }

        .container .alter ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .container .alter ul li {
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 搜索框 -->
        <input type="text" id="search">
        <!-- 提示框 -->
        <div class="alter">
            <ul>

            </ul>
        </div>
    </div>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

    <script>
        /*
            捕获用户输入行为
            1. 绑定键盘事件 - keydown、keyup、keypress
            2. 绑定输入事件 -> input
        */ 
        $("#search").bind("input",function(event){
            $('.alter>ul').empty();
            console.log("this is input");
            // 1.根据用户输入的内容，动态获取相关提示数据
            var inputValue = $(this).val(); // val() 方法返回或设置被选元素的值。
            $.getJSON('data/server4.json',function (data) {
                // console.log(data);
                $.each(data,function (index,obj) {
                    var name = obj.name;
                    if (name.indexOf(inputValue) >= 0) {
                        var value = obj.value;
                        $.each(value,function(index,text){
                            $('.alter>ul').append($('<li>'+text+'</li>'));
                        });
                    }
                });
            });
            // 获取焦点
            // 2.将提示框从隐藏状态切换到显示状态
            $('.alter').css('display','block');
        }).bind('blur',function(){
            // 取消焦点
            $('.alter').css('display','none');
        });


    </script>
</body>
</html>

weixin_46370867

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现搜索提示框~超级详细

以下是对Ajax搜索提示框的整理，希望可以帮助到有需要的小伙伴~文章目录静态页面用户的操作是用事件来处理的源码静态页面搜索框 input提示框无序列表加容器 div 做样式【默认不显示】<div class="container">  <input type="text" id="search" />  <div class="alter"> <ul&gt
复制链接

扫一扫