主页 > 编程资料 > Javascript >
发布时间:2018-11-01 作者:apizl 阅读:348次

首先需要引入:

 <link href="/static/css/jquery-ui.css" rel="stylesheet">
<script src="/static/js/jquery-ui.min.js"></script>

引入对应样式和js,然后使用如下js即可达到百度下拉值实时效果。

input是你的搜索框的id,这样就完成了。之前使用

<script charset="gbk" src="https://cdn.jsdelivr.net/opensug/1.1.1/opensug.js"></script>来进行使用。

结果发现居然夹带一堆广告,也不太清楚是不是官方的索性自己用autocomplete来实现这个功能进行代替了。效果其实是一样的。

$(function () {
    $("#input").autocomplete({// searchStreedRoad_auto 输入框id
        source: function (request, response) {
            $.ajax({
                type: 'get',
                url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + request.term ,
                dataType: 'jsonp',
                async: true,
                jsonp: 'cb',
                success: function (data) {
                    response( data.s, function( item ) { // 此处是将返回数据转换为 JSON对象,并给每个下拉项补充对应参数
                        return {
                            // 设置item信息
                            label: item.chinese_name +"    "+item.english_name, // 下拉项显示内容
                            value: item.chinese_name,   // 下拉项对应数值
                    }
                    });
                }, error: function () {
                    console.log('faile');
                }
            })
        },
        minLength: 2,
        select: function (event, ui) {
        }
    });

当然可以使用编写好的:

<script src="https://www.1024cs.com/static/js/baiduxiala.js"></script>
<script>var baidu_input = 's';</script>

效果如下:

使用jquery autocomplete功能实现实时查询百度下拉值效果

文章由爱资料原创本文地址:https://www.apizl.com/archives/view-148738-1.html,转载请以链接形式标明本文地址!
关键字词: