搜索框制作_学习笔记

首页免费课搜索框制作笔记

搜索框制作

                
                远人
            Web前端工程师

                    查看讲师更多课程 
                    远人讲师的其他课程
                
电商网站前端架构
中级·101321
免费课程
                                
CSS Sprite雪碧图应用
初级·47102
免费课程
                                
固定边栏滚动特效
初级·38896
免费课程
                                
认识响应式布局
中级·132133
免费课程
                                
Fiddler工具使用
中级·63507
免费课程
                                
                难度初级
            
                时长 3小时 0分
            
                学习人数
            
综合评分9.20
                            239人评价
                        查看评价
                                9.5
                                内容实用
                            
                                9.1
                                简洁易懂
                            
                                9.0
                                逻辑清晰

最热最新

写额外飞1
1. 兼容性视图模式
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>搜索框</title>
<style type="text/css">
body{
background-color: #333;
}
.bg-div{
background-image: url("river.jpg");
width: 1228px;
height: 690px;
margin: 0 auto;
}
.logo{
background-image: url("logo.png");
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}
form{
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text{
border: 0;
outline: none;
float: left;
height: 25px;
line-height: 25px;
width: 350px;
}
.search-input-button{
border: 0;
background-image: url("search-button.png");
width: 29px;
height: 29px;
float: left;
}
.search-box{
position: absolute;
top: 200px;
left: 300px;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form action="">
<input type="text" class="search-input-text"/>
<input type="submit" value="" class="search-input-button"/>
</form>
</div>
</div>
</body>
</html>
查看全部

0 采集收起来源：解决浏览器兼容问题
2018-07-26
写额外飞1

1.按钮的对齐使用浮动
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style type="text/css">
body{
background-color: #333;
}
.bg-div{
background-image: url("river.jpg");
width: 1228px;
height: 690px;
margin: 0 auto;
}
.logo{
background-image: url("logo.png");
width: 107px;
height: 53px;
float: left;
margin: -4px 18px 0 0;
}
form{
float: left;
background-color: #fff;
padding: 5px;
}
.search-input-text{
border: 0;
outline: none;
float: left;
height: 25px;
line-height: 25px;
width: 350px;
}
.search-input-button{
border: 0;
background-image: url("search-button.png");
width: 29px;
height: 29px;
float: left;
}
.search-box{
position: absolute;
top: 200px;
left: 300px;
}
</style>
</head>
<body>
<div class="bg-div">
<div class="search-box">
<div class="logo"></div>
<form action="">
<input type="text" class="search-input-text"/>
<input type="submit" value="" class="search-input-button"/>
</form>
</div>
</div>
</body>
</html>

查看全部

1 采集收起来源：Bing搜索框制作
2018-07-26
飞鸿踏雪燕归来

解决浏览器兼容问题：
<meta http-equiv=“X-UA-Compatible” content=“IE-edge”>

查看全部

0 采集收起来源：解决浏览器兼容问题
2018-07-21

慕神7088389

大家相互学习一下！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>taobao search</title>
    <style type="text/css">
 @font-face {
        font-family: iconfont;
 src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
 src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),
 url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),
 url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.tff) format("truetype"),
 url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg");
 }

    * {
        padding: 0;
 margin: 0;
 }

    body {
        font-size: 12px;
 line-height: 1.5;
 font-family: tahoma, arial, sans-serif;
 /*font: 12px/1.5 tahoma, arial, sans-serif;*/
 }

    a {
        text-decoration: none;
 }

    .search-container {
        padding: 10px;
 }

    .search-tips {
        float: right;
 padding: 3px 0 0 15px;
 }

    .search-tips a {
        color: #6c6c6c;
 }

    .search-button {
        float: right;
 }

    .btn-search {
        width: 100px;
 height: 45px;
 background: url(T1qyj8Fc8aXXc4E9bI-400-300.png) no-repeat 0 -200px;
 border: none;
 cursor: pointer;
 }

    .search-content {
        height: 39px;
 background: #f50;
 overflow: hidden;
 padding: 3px 0 3px 77px;
 position: relative;
 }

    .search-content input {
        width: 100%;
 height: 39px;
 line-height: 39px;
 border: none;
 outline: none;
 background: #fff;
 padding: 0 25px 0 25px;
 font-size: 18px;
 }

    .iconfont {
        font-family: iconfont;
 font-size: 12px;
 font-style: normal;
 color: #ccc;
 position: absolute;
 top: 14px;
 left: 85px;
 z-index: 2;
 }

    .search-list {
        position: absolute;
 top: 13px;
 left: 13px;
 z-index: 3;
 width: 72px;
 height: 39px;
 overflow: hidden;
 background: #fff;
 border-left: 1px solid #e5e5e5;
 border-right: 1px solid #e5e5e5;
 }

    .search-list ul {
        list-style: none;
 }

    .search-list li {
        height: 39px;
 line-height: 39px;
 }

    .search-list li a {
        display: block;
 color: #6c6c6c;
 text-align: center;
 }

    .search-list .focus {
        background: #f7f7f7;
 }

    .focusH {
        height: auto;
 border-bottom: 1px solid #e5e5e5;
 }
    </style>
</head>

<body>
    <div class='search-container'>
        <div class="search-list" id="Tab">
            <ul id="tabs">
                <li id="tab1" class="focus">
                    <a href="#">宝贝</a>
                </li>
                <li id="tab2">
                    <a href="#">店铺</a>
                </li>
            </ul>
        </div>
        <div class="search-pannel">
            <form>
                <div class="search-tips">
                    <a href="#">
 高级<br>搜索
                    </a>
                </div>
                <div class="search-button">
                    <button class="btn-search"></button>
                </div>
                <div class="search-content">
                    <input type="text" x-webkit-speech=''>
                    <i class="iconfont">ő</i>
                </div>
            </form>
        </div>
    </div>
</body>
</html>


<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
$('ul').on('mouseenter', 'li', function() {
    $('#Tab').addClass('focusH');
 $('li').css('display', 'block');
 $(this).addClass('focus');
 $(this).siblings().removeClass('focus');

 if ($('#Tab').hasClass('focusH')) {
        $('ul').on('mouseleave', function() {
            $('#Tab').removeClass('focusH');
 });
 }
});

$('ul').on('click', 'li', function(e) {
    $(this).addClass('focus');
 $(this).siblings().css('display', 'none');
});
</script>

查看全部

1 采集收起来源：切换菜单（动态效果）制作

2018-06-19

慕神7088389

不会原生JS实现JSONP的同学看我代码

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <title>bing search</title>
    <style type="text/css">
    body {
        background-color: #333;
    }

    .bg-div {
        position: relative;
        background-image: url(river.jpg);
        width: 1228px;
        height: 690px;
        margin: 0 auto;
    }

    .logo {
        background-image: url(logo.png);
        height: 53px;
        width: 107px;
        float: left;
        margin: -4px 18px 0 0;
    }

    .search-form {
        float: left;
        background-color: #fff;
        padding: 5px;
    }

    .search-text {
        height: 25px;
        line-height: 25px;
        float: left;
        width: 350px;
        border: 0;
        outline: none;
    }

    .search-button {
        background-image: url(search-button.png);
        width: 29px;
        height: 29px;
        float: left;
        border: 0
    }

    .search-box {
        position: absolute;
        top: 150px;
        left: 200px;
    }

    .suggest {
        display: none;
        width: 388px;
        background-color: #fff;
        position: absolute;
        margin: 0;
        padding: 0;
        border-width: 1px;
        border-style: solid;
        border-color: #999;
    }

    .suggest ul {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0
    }

    .suggest ul li {
        padding: 3px;
        line-height: 25px;
        font-size: 14px;
        color: #777;
        cursor: pointer;
        padding: 3px;
    }

    .suggest ul li:hover {
        background-color: #e5e5e5;
        text-decoration: underline;
    }

    .suggest strong {
        color: #000;
    }

    .clearfix:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0px;
    }

    .clearfix {
        zoom: 1
    }

    .nav {
        margin: 0 auto;
        width: 1228px;
    }

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

    .nav ul li {
        float: left;
        padding: 10px;
    }

    .nav ul li a {
        color: #999;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
    }

    a:hover {
        text-decoration: underline;
    }
    </style>
</head>

<body>
    <div class="nav">
        <ul class="clearfix">
            <li><a href="#">图片</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">词典</a></li>
            <li><a href="#">咨询</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">影响力</a></li>
            <li><a href="#">更多</a></li>
        </ul>
    </div>
    <div class="bg-div">
        <div class="search-box">
            <div class="logo"></div>
            <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
                <input type="text" class="search-text" name="q" id="search_input" autocomplete="off" />
                <input type="submit" class="search-button" value="" />
            </form>
        </div>
    </div>
    <div class="suggest" id="search-suggest" >
        <ul id="search-result">
            <li> 搜索内容 </li>
            <li> 搜索内容 </li>
        </ul>
    </div>
    <script>
    var getDOM = function(id) {
        return document.getElementById(id);
    };

    var addEvent = function(id, event, fn) {
        var el = getDOM(id) || document;

        if (el.addEventListener) {
            el.addEventListener(event, fn, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + event, fn);
        }
    };

    var getElementLeft = function(element) {
        var actualLeft = element.offsetLeft,
            current = element.offsetParent;

        while (current !== null) {
            actualLeft += current.offsetLeft;
            current = current.offsetParent;
        }
        return actualLeft;
    };

    var getElementTop = function(element) {
        var actualTop = element.offsetTop,
            current = element.offsetParent;

        while (current !== null) {
            actualTop += current.offsetTop;
            current = current.offsetParent;
        }
        return actualTop;
    };

    var ajaxGet = function(url, callback) {
        var _xhr = null;

        if (window.XMLHttpRequest) {
            _xhr = new window.XMLHttpRequest();
        } else if (window.ActiveXObject) {
            _xhr = new ActiveXObject('Msxml2.XMLHTTP');
        }
        _xhr.onreadystatechange = function() {
            if (_xhr.readyState == 4 && _xhr.status == 200) {
                callback(JSON.parse(_xhr.reponseText));
            }
        };
        _xhr.open('get', url, true);
        _xhr.send(null);
    };

    var delegateEvent = function(target, event, fn) {
        addEvent(document, event, function(e) {
            if (e.target.nodeName == target.toUpperCase()) {
                fn.call(e.target);
            }
        });
    };

    // addEvent('search_input','keyup',function(){
    //     var searchText=getDOM('search_input').value;

    //     ajaxGet('http://api.bing.com/qsonhs.aspx?type=cb&&q='+searchText,function(data){
    //         var d = data.AS.Results[0].Suggests,
    //             html;

    //         for (var i in d) {
    //             html += '<li>' + d[i].Txt + '</li>';
    //         }
    //         getDOM('search-result').innerHTML=html;

    //         var _dom=getDOM('search-suggest');

    //         _dom.style.top=getElementTop(getDOM('search-form'))+getDOM('search-form').offsetHeight+'px';
    //         _dom.style.left=getElementLeft(getDOM('search-form'))+'px';
    //         _dom.style.position='absolute';
    //         _dom.style.display='block';
    //     });
    // });

    addEvent('search_input', 'keyup', function() {
        var searchText = getDOM('search_input').value,
            url = "http://api.bing.com/qsonhs.aspx?type=cb&cb=jsonpcallback&q=" + searchText,
            script = document.createElement('script');

        script.setAttribute('src', url);
        document.getElementsByTagName('body')[0].appendChild(script);

        var _dom = getDOM('search-suggest');

        _dom.style.top = getElementTop(getDOM('search-form')) + getDOM('search-form').offsetHeight + 'px';
        _dom.style.left = getElementLeft(getDOM('search-form')) + 'px';
        _dom.style.position = 'absolute';
        _dom.style.display = 'block';
    });

    function jsonpcallback(data) {
        if (data.AS.FullResults != 0) {
            var d = data.AS.Results[0].Suggests,
                html = "";

            // console.log(d);
            for (var i = 0; i < d.length; i++) {
                html += "<li>" + d[i].Txt + "</li>";
            }
            getDOM('search-result').innerHTML = html;
        }
    }

    delegateEvent('li', 'click', function() {
        var keyword = this.innerHTML;
        location.href = 'http://cn.bing.com/search?q=' + keyword;
    });

    window.onclick = function(e) {
        getDOM('search-suggest').style.display = 'none';
        e.stopPropagation();
    };
    </script>
</body>

</html>

查看全部

3 采集收起来源：JS实现Ajax方法

2018-06-19

慕神7088389

有问题的童鞋可以参考我的代码：

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <title>bing search</title>
    <style type="text/css">
    body {
        background-color: #333;
    }

    .bg-div {
        position: relative;
        background-image: url(river.jpg);
        width: 1228px;
        height: 690px;
        margin: 0 auto;
    }

    .logo {
        background-image: url(logo.png);
        height: 53px;
        width: 107px;
        float: left;
        margin: -4px 18px 0 0;
    }

    .search-form {
        float: left;
        background-color: #fff;
        padding: 5px;
    }

    .search-text {
        height: 25px;
        line-height: 25px;
        float: left;
        width: 350px;
        border: 0;
        outline: none;
    }

    .search-button {
        background-image: url(search-button.png);
        width: 29px;
        height: 29px;
        float: left;
        border: 0
    }

    .search-box {
        position: absolute;
        top: 150px;
        left: 200px;
    }

    .suggest {
        display: none;
        width: 388px;
        background-color: #fff;
        position: absolute;
        margin: 0;
        padding: 0;
        border-width: 1px;
        border-style: solid;
        border-color: #999;
    }

    .suggest ul {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0
    }

    .suggest ul li {
        padding: 3px;
        line-height: 25px;
        font-size: 14px;
        color: #777;
        cursor: pointer;
        padding: 3px;
    }

    .suggest ul li:hover {
        background-color: #e5e5e5;
        text-decoration: underline;
    }

    .suggest strong {
        color: #000;
    }

    .clearfix:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0px;
    }

    .clearfix {
        zoom: 1
    }

    .nav {
        margin: 0 auto;
        width: 1228px;
    }

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

    .nav ul li {
        float: left;
        padding: 10px;
    }

    .nav ul li a {
        color: #999;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
    }

    a:hover {
        text-decoration: underline;
    }
    </style>
</head>

<body>
    <div class="nav">
        <ul class="clearfix">
            <li><a href="#">图片</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">词典</a></li>
            <li><a href="#">咨询</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">影响力</a></li>
            <li><a href="#">更多</a></li>
        </ul>
    </div>
    <div class="bg-div">
        <div class="search-box">
            <div class="logo"></div>
            <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
                <input type="text" class="search-text" name="q" id="search_input" autocomplete="off" />
                <input type="submit" class="search-button" value="" />
            </form>
        </div>
    </div>
    <div class="suggest" id="search-suggest" >
        <ul id="search-result">
            <li> 搜索内容 </li>
            <li> 搜索内容 </li>
        </ul>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $('#search_input').bind('keyup', function() {
        var jqueryInput = $(this);
        var searchText = jqueryInput.val();
        $.ajax({
            type: "GET",
            async: true,
            url: 'http://api.bing.com/qsonhs.aspx?type=cb&&q=' + searchText,
            dataType: 'jsonp',
            jsonp: 'cb',
            jsonpCallBack: 'callback',
            success: function(data) {
                if (data.AS.FullResults != 0) {
                    var d = data.AS.Results[0].Suggests,
                        html = '';
                    for (var i = 0; i < d.length; i++) {
                        html += '<li>' + d[i].Txt + '</li>';
                    }
                    $('#search-result').html(html);
                    $('#search-suggest').show().css({
                        top: $('#search-form').offset().top + $('#search-form').outerHeight(),
                        left: $('#search-form').offset().left,
                        position: 'absolute'
                    });
                }
            },
            error: function(e) {
                console.log(e.responseText);
            }
        });
        // $.get('http://api.bing.com/qsonhs.aspx?q=' + searchText, function(d) {
        //     var data = d.AS.Results[0].Suggests,
        //         html;
        //     for (var i in data) {
        //         html += '<li>' + data[i].Txt + '</li>';
        //     }
        //     $('#search-result').html(html);
        //     $('#search-suggest').css({
        //         top: $('#search-form').offset().top + $('#search-form').height() + 10,
        //         left: $('#search-form').offset().left,
        //         position:'absolute'
        //     }).show();
        // }, 'json');
    });
    $(document).click(function() {
        $('#search-suggest').hide();
        return false;
    });
    $(document).delegate('li', 'click', function() {
        var keyword = $(this).text();
        location.href = 'http://cn.bing.com/search?q=' + keyword;
    });
    </script>
</body>

</html>

查看全部

7 采集收起来源：Ajax原理及jQuery实现

2018-06-18

不朽3453558 03:37

JQuery
$.get(url , callback , 'json');
url：请求服务器的端口和接口地址
callback ：回调服务器返回的数据展示给用户
json：返回数据的类型

查看全部

0 采集收起来源：Ajax原理及jQuery实现
2018-06-07
不朽3453558 02:08

JQuery中的DOM操作

查看全部

0 采集收起来源：jQuery实现事件绑定、DOM操作
2018-06-07
不朽3453558

<mate http-equiv="X-UA-Compatible" content="IE=edge">
防止IE不兼容

查看全部

0 采集收起来源：解决浏览器兼容问题
2018-06-07

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 具有HTML、CSS样式、Javascript、jQuery基础知识

老师告诉你能学到什么？: 可以利用HTML、CSS样式制作出搜索框效果，并使用Javascript及jQuery代码实现Ajax技术分别实现搜索引擎的制作。 1. 定位元素 2. 输入框、按钮美化 3. 修复IE兼容性问题 4.使用Javascript代码实现Ajax技术 5.使用 jQuery代码实现Ajax技术 6.同源原理

微信扫码，参与3人拼团

热搜

最近搜索清空

搜索框制作