帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery+ajax搜索框输入关键字自动补全代码,仿百度搜索

帝国模板之家 2020-10-21 网页特效 评论

这是一款模仿百度搜索输入关键字自动补全代码,基于jquery+ajax实现,自动补全数据是通过百度http://suggestion.baidu.com/su?wd=' + keywords jsonp 返回。

前端代码:

<!DOCTYPE html>
<meta charset="utf8">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Baidu Jsonp</title>
</head>
<style type="text/css">
    #word{
        position: absolute;
        z-index: 99;
        width: 145px;
        height: auto;
        background-color: white;
        border: black solid 1px;
        display: none;
    }
    .click_work{
        padding-bottom: 8px;
        font-weight:lighter;
        font-size: 13px;
        cursor:pointer;/*鼠标放上变成小手*/
    }
    .click_work:hover{
        color: orange;
        background-color: gray;
    }
    .error{
        color: gray;
        cursor:pointer;/*鼠标放上变成小手*/
    }
</style>
<body>
    <center>
        <h1>百度</h1>
    </center>
    <table align="center" cellspacing="0" cellpadding="10" border="0" >
        <tr>
            <td style="position: relative;">
                <input id="text" type="text" placeholder="搜索">
                <input type="button" value="Go">
                <div id="word"></div>
            </td>
        </tr>
    </table>
</body>
<!-- 引入DOM -->
    <script type="text/javascript" src="public/jquery.js"></script>
    <script type="text/javascript" src="public/JsonpAjax.js"></script>
<!-- END DOM -->
</html>

JsonpAjax.js

$(function(){
//当键盘键被松开时发送Ajax获取数据
        $('#text').keyup(function(){
            var keywords = $(this).val();
            if (keywords=='') { $('#word').hide(); return };
            $.ajax({
                url: 'http://suggestion.baidu.com/su?wd=' + keywords,
                dataType: 'jsonp',
                jsonp: 'cb', //回调函数的参数名(键值)key
                // jsonpCallback: 'fun', //回调函数名(值) value
                beforeSend:function(){
                    $('#word').append('<div>正在加载。。。</div>');
                },
                success:function(data){
                    $('#word').empty().show();
                    if (data.s=='')
                    {
                        $('#word').append('<div class="error">Not find  "' + keywords + '"</div>');
                    }
                    $.each(data.s, function(){
                        $('#word').append('<div class="click_work">'+ this +'</div>');
                    })
                },
                error:function(){
                    $('#word').empty().show();
                    $('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
                }
            })
        })
//点击搜索数据复制给搜索框
        $(document).on('click','.click_work',function(){
            var word = $(this).text();
            $('#text').val(word);
            $('#word').hide();
            // $('#texe').trigger('click');触发搜索事件
        })

    })
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言