模拟百度搜索框实现

最新推荐文章于 2024-05-03 15:23:28 发布

godferyZhu

最新推荐文章于 2024-05-03 15:23:28 发布

阅读量1.4k

点赞数 1

分类专栏：工作总结

本文链接：https://blog.csdn.net/qq_42514643/article/details/96476122

版权

工作总结专栏收录该内容

21 篇文章 1 订阅

订阅专栏

需求很简单,就是模拟百度搜索框的实现


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度搜索框实现</title>
<style type="text/css">
            * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }
            html,
            body {
            font-size: 14px;
            font-family: "微软雅黑";
            }
            .searchBox {
            width: 300px;
            margin: 100px auto;
            }
            .searchBox input {
            display: block;
            outline: none;
            width: 100%;
            height: 30px;
            padding: 0 10px;
            border: 1px solid rebeccapurple;
            }
            ul,
            li {
            list-style: none;
            width: 100%;
            }
            ul {
            border: 1px solid #ddd;
            border-top: none;
            display: none;
            }
            li {
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            }
            li:hover {
            background-color: #eee;
            }
</style>
</head>
<body>
<div class="searchBox">
<input type="text" id="searchInput" placeholder="请输入搜索内容" autocomplete="off">
<ul id="viewContent">
<!-- <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li> -->
</ul>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8" src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
        // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='关键字'&cb=jQuery11020934050068638484_1563500786346&_=1563500786361
        var mySearch = (function () {
        var $searchInput = $("#searchInput"),
        $viewContent = $("#viewContent"),
        searchKey = '';
        function callBack(data) {
        var str = '';
        data = data.s;
        for (var i = 0, len = data.length; i < len; i++) {
        // 默认显示4条信息
        if (i <= 3) {
        str += "<li>" + data[i] + "</li>";
        }
        }
        $viewContent.html(str);
        $viewContent.show();
        };
        function bindHtml() {
        // getData
        $.ajax({
        url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + searchKey,
        dataType: 'jsonp',
        jsonp: 'cb',
        success: callBack
        })
        };
        function init() {
        // 获取搜索框的关键字
        $searchInput.on('focus keyup', function () {
        // 把空格开头和空格结尾换成空字符串
        searchKey = $(this).val().replace(/(^ +| +$)/g,'');
        if (searchKey.length > 0) { //如果输入框有值
        bindHtml();
        return false;
        }
        // 输入框没有值
        $viewContent.stop().slideUp(300);
        }).on('blur', function () {
        // 失去焦点搜索框收缩即可 这里的计时器是用来解决最后几个li点不到的bug
        setTimeout(function () {
        $viewContent.stop().slideUp(300);
        }, 100)
        });
        // 给li绑定方法
        $viewContent.on('click', "li", function (e) {
        $searchInput.val($(this).html());
        });
        };
        return {
        init: init
        }
        })();
        mySearch.init();
</script>

godferyZhu

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
模拟百度搜索框实现

需求很简单,就是模拟百度搜索框的实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-...
复制链接

扫一扫