猿问

关于智能搜索框问题

下面的代码用谷歌浏览器检查没发现问题,重新看了一遍视频核对了代码感觉没有问题了,html也用fiddler工具提交到了http://api.bing.com下了,但是就是出不来那个智能效果,大神帮帮忙,多谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta content="text/html; charset=utf-8" http-equiv="content-type" />


<title>Document</title>

<style type="text/css">

    body{

     background: #333;

    }

    .bg_div{

     background-image: url("river.jpg");

     height: 690px;

     width: 1268px;

     margin: 0 auto;

     position: relative;


    }

    .logo{

     background-image: url("logo.png");

     height:53px;

     width:107px;

     float: left;

    

     margin: -5px 18px 0 0;

    }

    .search-form{

     float: left;

     background: #fff;

     padding: 5px;

       /* width: 388px;*/

    }

    .search-text{

     border: 0;

     float: left;

     height: 25px;line-height: 25px;

     outline: none;

     width: 350px;

    }

    .search-submit{

     border: 0;

     background-image: url("search-button.png");

     height: 29px;

     width:29px;

     float: left;


    }

    .box{

     position: absolute;

     top: 200px;

     left: 400px;

    }

    .suggest{

        width: 388px;

        background: #fff;

        border: 1px solid #999;

    }

    .suggest ul{

        list-style: none;

        margin: 0;

        padding: 0;

    }

    .suggest ul li{

        padding: 5px;

      font-size: 12px;

      line-height: 25px;

      cursor: pointer;

    }

    .suggest ul li:hover{

        background: #ccc;

        text-decoration: underline;

    }

</style>

</head>

<body>

<div>

<div>

<div></div>

<form action="https://cn.bing.con/search" target="_blank" id="search-form" >

<input type="text" name="q" id="search-input" autocomplete="off">

<input type="submit" value="">

</form>

</div>

</div>

<div id="search-suggest" style="display:none">

<ul id="search-result">

<li>搜索结果1</li>

<li>搜索结果2</li>

</ul>

</div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

    $("#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({

            left:$('#search-form').offset().left,

            top:$('#search-form').offset().top+$('#search-form').height()+10,

            position:'absolute'

        });

        },'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>


慕仰0443758
浏览 1230回答 2
2回答

拿不到钥匙的车放不进手机的歌

我记得慕课有一个智能搜索的课程你可以看一下, 代码检索,,,恕在下直言 太麻烦了

慕仰0443758

meirenzhidaoma
随时随地看视频慕课网APP
我要回答