三、jQuery--jQuery实践--搜索框制作

input标签讲解

　　<input/>作为按钮的type属性：button、submit（后面会有二者对比分析）

　　　　（交互时的效果跟浏览器以及操作系统相关）

　　<input/>的局限性

　　　　<input/>是自闭合标签（不能嵌套其他的标签），所以不能定义复杂样式按钮，所谓复杂的样式，一般指图文混杂的按钮，如下图所示：

　　　　如果想实现复杂的按钮样式，我们可以选择使用button标签。

搜索框中的form标签<form></form>

　　<form>基本构成

　　　　action属性：决定了表单会被提交到服务器的哪个端口

　　　　target属性：决定了页面打开方式

　　　　method属性：默认使用get即可

　　<input/>提交按钮的默认行为：

　　　　当<input/>标签的type="submit"时，可以提交表单内容到服务器

　　　　此时按钮必须放置在要提交的表单元素内，也就是<form>标签内

实例一：实现简单的搜索框

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <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; }
    </style>
</head>

<body>
 <div class="bg-div">
     <div class="search-box">
     <div class="logo"></div>
     
         <form class="search-form" action="https://cn.bing.com/search" target="_blank">
             <input type="text" class="search-text" name="q"/>
             <input type="submit" class="search-button" value=""/>
         </form>
     </div>
 </div>
</body>
</html>

View Code

实例二：实现带有智能提示的搜索框

　　需要掌握的知识点：

　　借助jQuery&JS完成动态效果

　　事件绑定和事件代理

　　AJAX（）用于和服务器直接的信息交换

　　（注意：AJAX发送请求的URL与服务器地址必须是同一域名下，要解决跨域问题，如果了解websever技术，可以使用nginx和fiddler工具设置）

jQ版：

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8" />
    <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;
        position:relative;
    }
    
    .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 {
        width: 388px;
        background-color: #fff;
        border: 1px solid #999;
    }
    
    .suggest ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .suggest ul li {
        padding: 3px;
        font-size: 14px;
        line-height: 25px;
        cursor: pointer;
    }
    
    .suggest ul li:hover {
        background-color: #ccc;
        text-decoration: underline;
    }
    </style>
</head>

<body>
    <div class="bg-div">
        <div class="search-box">
            <div class="logo"></div>
            <form class="search-form" id="search-form" action="https://cn.bing.com/search" target="_blank">
                <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" style="display:none">
        <ul id="search-result">
            <li>搜索结果1</li>
            <li>搜索结果2</li>
        </ul>
    </div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    $('#search_input').bind('keyup', function() {
            var searchText = $('#search_input').val();
            $.get('http://api.bing.com/qsonhs.aspx?q='+searchText, function(d) {
                var d = d.AS.Results[0].Suggests;
                var html='';
                for (var i = 0; i < d.length; i++) {
                    html += '<li>' + d[i].Txt + '</li>';
                }
                $('#search-result').html(html);
                $('#search-suggest').show().css({
                position:'absolute',
                top:$('#search-form').offset().top+$('#search-form').outerHeight(),
                left:$('#search-form').offset().left
            });
            }, 'json');
        });
    $(document).bind('click',function(){
        $('#search-suggest').hide();
    })
    $(document).delegate('li','click',function(){  //事件代理
        var keyword = $(this).text();
        location.href = 'http://cn.bing.com/search?q='+keyword;
    })
    </script>
</body>

</html>

View Code

JS版：

<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8" />
    <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;
        position: relative;
    }
    
    .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 {
        width: 388px;
        background-color: #fff;
        border: 1px solid #999;
    }
    
    .suggest ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .suggest ul li {
        padding: 3px;
        font-size: 14px;
        line-height: 25px;
        cursor: pointer;
    }
    
    .suggest ul li:hover {
        background-color: #ccc;
        text-decoration: underline;
    }
    </style>
</head>

<body>
    <div class="bg-div">
        <div class="search-box">
            <div class="logo"></div>
            <form class="search-form" id="search-form" action="https://cn.bing.com/search" target="_blank">
                <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" style="display:none">
        <ul id="search-result">
            <li>搜索结果1</li>
            <li>搜索结果2</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;
        var current = element.offsetParent;

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

    var getElementTop = function(element) {
        var actualTop = element.offsetTop;
        var 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(); // 在非IE浏览器下 使用new关键字实例化MLHttpRequest()
        } else if (window.ActiveXObject) { //在IE浏览器下使用ActiveXObject
            _xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        _xhr.onreadystatechange = function() {
            if (_xhr.readyState == 4 && _xhr.status == 200) {
                callback(JSON.parse(_xhr.responseText));
            }
        }
        _xhr.open('get', url, false);
        _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?q=' + searchText, function(d) {
            var d = d.AS.Results[0].Suggests;
            var html = '';
            for (var i = 0; i < d.length; i++) {
                html += '<li>' + d[i].Txt + '</li>';
            }
            getDOM('search-result').innerHTML=html;
            getDOM('search-suggest').style.top = getElementTop(getDOM('search-form')) + 38 + 'px';
            getDOM('search-suggest').style.left = getElementLeft(getDOM('search-form')) + 'px';
            getDOM('search-suggest').style.position = 'absolute';
            getDOM('search-suggest').style.display = 'block';
        });
    });
    delegateEvent('li','click',function(){
        var keyword = this.innerHTML;
        location.href = 'http://cn.bing.com/search?q='+keyword;
    });
    </script>
</body>

</html>

View Code

实例三：淘宝搜索框制作

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>淘宝搜索框</title>
    <style>
    body {
        font: 12px/1.5 tahoma, arial, sans-serif;
    }
    
    a {
        text-decoration: none;
    }
    
    .search-tips {
        float: right;
        padding: 2px 0 0 5px;
    }
    
    .search-tips a {
        color: #6c6c6c;
    }
    
    .searc-button {
        float: right;
    }
    
    .btn-search {
        width: 120px;
        height: 40px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        background-color: #ff4200;
        border: 0;
    }
    
    .btn-search:hover {
        background-color: #f52b00;
    }
    
    .search-common-panel {
        height: 34px;
        background-color: #f50;
        overflow: hidden;
        padding: 3px 0 3px 77px;
        position: relative;
    }
    
    .search-common-panel input {
        height: 32px;
        line-height: 32px;
        width: 100%;
        border: none;
        outline: 0;
        background-color: #fff;
    }
    
    .search-common-panel i {
        width: 25px;
        height: 27px;
        background: url('1.png');
        background-repeat: no-repeat;
        position: absolute;
        top: 5px;
        left: 80px;
        z-index: 2;
    }
    
    .search-list {
        position: absolute;
        z-index: 2;
        top: 11px;
        left: 11px;
        overflow: hidden;
        width: 73px;
        height: 32px;
        border: 1px solid #f6f6f6;
        background-color: #fff;
    }
    
    .search-list ul {
        list-style-type: none;
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .search-list li {
        display: none;
        overflow: hidden;
        text-align: center;
        height: 34px;
        line-height: 34px;
    }
    
    .search-list ul li a {
        font-size: 15px;
    }
    
    .search-list .selected {
        background-color: #f6f6f6;
        display: block;
    }
    
    .trigger-hover {
        height: auto;
    }
    
    .trigger-hover li {
        display: block;
    }
    </style>
</head>

<body>
    <div class="search-container">
        <div class="search-list" id="search-tab">
            <ul>
                <li id="tab_1" class="selected"><a href="#">宝贝</a></li>
                <li id="tab_2"><a href="#">店铺</a></li>
            </ul>
        </div>
        <div class="search-pannel">
            <form action="">
                <div class="search-tips"><a href="#">高级<br />搜索</a></div>
                <div class="searc-button">
                    <button type="submit" class="btn-search">搜索</button>
                </div>
                <div class="search-common-panel">
                    <input type="text" x-webkit-speech="">
                    <i></i>
                </div>
            </form>
        </div>
    </div>
</body>
<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);
    }
}

addEvent('search-tab', 'mouseover', function() {
    this.className += ' trigger-hover';
});

addEvent('tab_1', 'mouseover', function() {
    if (this.className.indexOf('selected') < 0) {
        this.className += ' selected';
    }
})

// addEvent('tab_1', 'mouseout', function() {
//     this.className = '';
// })

addEvent('tab_1', 'click', function() {
    getDOM('search-tab').className = 'search-list';
    getDOM('tab_1').className = ' selected';
})



addEvent('tab_2', 'mouseover', function() {
    if (this.className.indexOf('selected') < 0) {
        this.className += ' selected';
    }
})

// addEvent('tab_2', 'mouseout', function() {
//     this.className = '';
// })

addEvent('tab_2', 'click', function() {
    getDOM('search-tab').className = 'search-list';
    getDOM('tab_2').className = ' selected';
})
</script>

</html>

View Code

（代码布局和样式有点冗余，js实现也有点小问题，有时间重新调下~）

其他：IE兼容性视图设置：

posted @ 2015-11-12 15:40 姜腾腾阅读(1412) 评论(0) 编辑收藏举报

刷新页面返回顶部