首先需要引入:
<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>
效果如下:
关键字词: