                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /搜索框制作

为什么后端测试都正常，却不能够像老师那样出来下拉框？

<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].Suggest;
            var html = '';
            for (var i = 0; i < d.length; i++) {
                html += '<li>' + d[i].Txt + '</li>';
            };
$('#search-result').html(html);
//请求服务器接口的地址
        $('#search-suggest').css({
            top: $('#search-form').offset().top + $('#search-form').height() + 10,
            left: $('#search-form').offset().left
        }).show();
        }, json);
    });
$(document).bind('click',function(){
$('#search-suggest').hide();
})
</script>

慕仔8853991

2018-10-09

源自：搜索框制作 2-5

关注问题我要回答

1106

操作

收起

3 回答

慕移动9181930
2022-03-27

一点都不详细，在这个页面之前还有2个步骤，一个是选择版本，一个是勾选一个同意的选项。这样写还是有一点好处的，虽然不是很明显：如果 n o s p a c e 返回 f a l s e ，那么就不必做 n o m o v e 的 4 个判断了，能节约一点效率，虽然这几乎是微乎其微的

0 回复有任何疑惑可以回复我~

收起回答

abuzzzzzzz
2019-01-05

同问我的也没有出现下拉框

运行f12有错误提示

0 回复有任何疑惑可以回复我~

收起回答

Zz皓
2018-11-02

兄弟，用我这段代码看看

<script 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();
  $.ajax({
    type: 'get',
    url: 'https://api.bing.com/qsonhs.aspx?type=cb&q=' + searchText,
    async: true,
    dataType: "jsonp",
    jsonp: 'cb',
    success: function(data) {
      // 新增输入框是否含有字符判断
      if(data.AS.Query.length > 0) {
        var data = data.AS.Results[0].Suggests;
        var html = "";
        for(var i = 0; i < data.length; i++) {
          html += '<li>' + data[i].Txt + '<li>';
        }
        $("#search-result").html(html);
        $('#search-suggest').show().css({
          position: 'absolute',
          top: $('#search-form').offset().top + $('#search-form').height() + 10,
          left: $('#search-form').offset().left
        });
      } else {
        $('#search-suggest').hide()
      }
    }
  });
});
$(document).bind('click', function() {
  $('#search-suggest').hide()
});
// jQuery事件代理
$(document).delegate('li', 'click', function() {
  var keyword = $(this).text()
  location.href = 'http://cn.bing.com/search?q=' + keyword;
})
</script>

0 回复有任何疑惑可以回复我~

收起回答