正文

如何使用jquery的jsonp实现仿百度下拉列表

时光不染回忆不淡  2022-02-13  361

关键词：

使用了mui布局，可以换布局，这个不重要，重要的是怎么实现的

<!doctype html>

<html>

<head>

//修改样式的css可以不看

body{

background-color: #fff;

}

.header-search{

width: 100%;

height: 44px;

background-color: #f8f8f8;

position: fixed;

top: 0px;

}

.my-search-input{

width: 80%;

margin: 3px auto;

height: 38px;

line-height: 38px;

}

/*.mui-input-row:last-child{

background-color: #fff;

}*/

.mui-search .mui-placeholder{

background-color: #fff;

}

.mui-active .mui-placeholder{

background-color: #fff;

}

.mui-search .mui-placeholder{

font-size: 20px;

}

input[type=search]{

background-color: #fff;

}

.hot-search{

margin-top: 44px;

text-align: center;

width: 100%;

border-top: 1px solid transparent;

}

.hot-search h2{

width: 100%;

font-size: 35px;

margin-top: 50px;

margin-bottom: 50px;

}

.searchList{

width: 100%;

padding: 0;

margin: 0;

}

.searchList li{

width: 100%;

list-style: none;

font-size: 33px;

color: #0db252;

font-weight: bold;

height: 40px;

line-height: 40px;

}

.searchList li:hover{

font-size: 40px;

cursor: pointer;

color: yellowgreen;

}

.searchList .active-li{

font-size: 40px;

cursor: pointer;

color: yellowgreen;

}

</style>

</head>

<body>

mui.init()

</script>

</div>

</ul>

</div>

</body>

//获取搜索的一些路径这个路径是使用自己电脑配置的接口不用使用后面有使用百度的接口

/*$.getJSON(searchList,{},function(r){

var searchListData = r.data;

var html = "";

for (var i = 0; i < searchListData.length; i++) {

var item = searchListData[i];

$(".searchList").append("<li>"+item+"</li>");

}

}); */

//文本框数据发生改变借用百度接口

$(".header-search input").on("input propertychange",function(){

var keyword = $(this).val();

$.ajax({

type: "get",

async: false,

url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?",

data:{

wd:keyword

dataType: "jsonp",

jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

//jsonpCallback:"message",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

success: function(r){

// alert(‘你的名字：‘ + r.s);

$(".searchList").empty();

var searchListData = r.s;

for (var i = 0; i < searchListData.length; i++) {

var item = searchListData[i];

$(".searchList").append("<li>"+item+"</li>");

}

error: function(){

alert(‘fail‘);

}

});

var num = -1;

//进入百度搜索页面的参数

var paramsWd = "";

//通过上下键控制走向通过enter控制进入哪个页面

$(".header-search input").on("keydown",function(event){

//event.which 获取键盘上的ACCIS码值

switch (event.which){

//上键通过改变num的值来改变li的类

case 38:

num--;

if (num == -2) {

num = $(".searchList li").length;

}

//通过num获取到li改变自己移除他人的激活class

$(".searchList li").eq(num).addClass("active-li").siblings().removeClass("active-li");

break;

//下键

case 40:

num++;

if (num == $(".searchList li").length-1) {

num = -1;

}

$(".searchList li").eq(num).addClass("active-li").siblings().removeClass("active-li");

break;

//回车

case 13:

//将回车中的数据传给keyword即：搜索关键字

paramsWd = $(".searchList li").eq(num).html();

location.href = "https://www.baidu.com/s?wd="+paramsWd;

break;

default:

break;

}

})

//如果鼠标移入ul区域那么num就不再生效了

//鼠标移入清除其他激活的类

$(".searchList").bind("mouseover",function(){

num = -1;

$(".searchList li").removeClass("active-li");

});

//单击ul下面的哪个li进入哪个

$(".searchList").on("click","li",function(){

paramsWd = $(this).html();

location.href = "https://www.baidu.com/s?wd="+paramsWd;

});

//通过在input中的值enter进入百度

$(".header-search input").on("keydown",function(event){

if (event.which==13) {

paramsWd = $(this).val();

location.href = "https://www.baidu.com/s?wd="+paramsWd;

}

});

//可以将进入百度页面获取html的赋值封装成函数把val的也封装成函数

</script>

</html>

jquery实现鼠标滑过显示导航下拉列表

...avascript实现的一个导航栏下拉列表，下面为大家讲解下是如何实现的，当网站导航栏项目很多的时候，我们往往是将同一级目录下的栏目先隐藏起来。当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列... 查看详情

jquery+css实现下拉列表（更新）

...、代码下拉列表效果如下：下拉列表的选项为动态追加，使用on方法，采用事件委派机制，响应选项的单击事件。经过测试，以下代码在Firefox55.0和Safari10.1.1中可正常运行。说明：和之前的版本相比，本次更新为下拉选项添... 查看详情

百度下拉智能搜索提示(代码片段)

此案例使用的时ajax技术实现百度下拉，其中有利用jsonp解决跨域的问题，目前刚接触到ajax技术，在这里分享记录一下学习的痕迹！<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>EMS-jquery查询</title><s... 查看详情

如何使用 jquery 设置选择下拉列表的“选定选项”

】如何使用jquery设置选择下拉列表的“选定选项”【英文标题】：Howtosetthe\'selectedoption\'ofaselectdropdownlistwithjquery【发布时间】：2013-07-2506:11:15【问题描述】：我有以下jquery函数：$.post(\'GetSalesRepfromCustomer\',data:selectedObj.value,function... 查看详情

如何使用 jQuery 清除按钮单击事件的下拉列表值？

】如何使用jQuery清除按钮单击事件的下拉列表值？【英文标题】：HowdoIclearthedropdownlistvaluesonbuttonclickeventusingjQuery?【发布时间】：2011-02-2810:17:55【问题描述】：【问题讨论】：是否要将它们重置为默认（顶部）值？【参考方案1】... 查看详情

如何使用 jquery 禁用 kendo ui 下拉列表？

】如何使用jquery禁用kendoui下拉列表？【英文标题】：howtodisablekendouidropdownlistwithjquery?【发布时间】：2016-04-1805:48:53【问题描述】：我正在使用剑道UI下拉列表，我是剑道UI的新手。如果@TrackingHelper.CurrentUser.IsViewTestCallType返回False... 查看详情

如何使用 JQuery 从下拉列表中选择特定项目？

】如何使用JQuery从下拉列表中选择特定项目？【英文标题】：HowdoyouselectaspecificitemfromadropdownlistusingJQuery?【发布时间】：2021-12-0108:37:40【问题描述】：我目前的代码如下：functionSetDefaultCarrier(orderCarrier)$("#carrierdropdownoption:contains("+... 查看详情

如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？

】如何根据使用jQuery/AJAX和PHP/MySQL选择的第一个下拉列表填充第二个下拉列表？【英文标题】：HowtopopulateseconddropdownbasedonselectionoffirstdropdownusingjQuery/AJAXandPHP/MySQL?【发布时间】：2012-02-0316:19:30【问题描述】：我正在尝试使用jQuery/... 查看详情

如何使用 jquery 选择下拉列表中的第一个元素？

】如何使用jquery选择下拉列表中的第一个元素？【英文标题】：Howtoselectthefirstelementinthedropdownusingjquery?【发布时间】：2010-11-2613:03:33【问题描述】：我想知道如何使用jquery在我的页面上的所有选择标签中选择第一个选项。试过这... 查看详情

如何使用jquery在下拉列表中绑定数据？

】如何使用jquery在下拉列表中绑定数据？【英文标题】：Howtobinddataindropdownusingjquery?【发布时间】：2021-08-3012:51:41【问题描述】：这是我的代码。单击“添加项目”按钮时调用函数AddRow。调试后发现ajax调用没有执行，这是什么问... 查看详情

使用jQuery同时设置两个下拉列表的选定值

...uslyusingjQuery【发布时间】：2013-10-1106:04:13【问题描述】：如何将一个下拉列表的选中值设置为另一个的选中值？下面的代码显示了如何正确完成此操作。ASPX<asp:DropDownListID="ddl1"RunAt="Server"DataVal 查看详情

如何使用 jQuery 或 Javascript 从其他下拉列表中显示/隐藏相同的选项

】如何使用jQuery或Javascript从其他下拉列表中显示/隐藏相同的选项【英文标题】：Howtoshow/hidesameoptionfromotherdropdownusingjQueryorJavascript【发布时间】：2021-12-2922:22:36【问题描述】：我有4个下拉列表<td><selectclass="enc... 查看详情

如何使用 jQuery 在下拉列表中复制表格行

】如何使用jQuery在下拉列表中复制表格行【英文标题】：HowtocopytablerowwithdropdownlistinwithjQuery【发布时间】：2017-10-0308:12:42【问题描述】：我有一个表，我想在按下AddNew链接后克隆它的最后一行。当我的行中只有文本框时它工... 查看详情

如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应

】如何使用JSON数据填充下拉列表作为jQuery中的ajax响应【英文标题】：HowtopopulatedropdownlistwithJSONdataasajaxresponseinjQuery【发布时间】：2013-11-1213:29:03【问题描述】：我正在开发一个j2ee应用程序。在我的应用程序中，我有一个下拉列... 查看详情

jquery学习——使用jq完成下拉列表左右选择

...获取到的option添加到右侧的下拉列表中去。(append方法的使用)3、具体代码实现：1<!DOCTYPEhtml>2<html>3< 查看详情

jquery使用jsonp实现跨域请求

$.ajax({type:"get",async:false,url:"http://apppay.xyz/apppay.php",dataType:"jsonp",//返回的数据类型，设置为JSONP方式jsonp:"callbackname",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)jsonpCallback:"callbacknam 查看详情

如何使用jquery在标签中显示多选下拉列表的选定文本？

】如何使用jquery在标签中显示多选下拉列表的选定文本？【英文标题】：Howtodisplayselectedtextofmultiselectdropdowninlabelusingjquery?【发布时间】：2016-09-1301:29:58【问题描述】：我正在使用BootstrapMultiselectdropdown。我想在标签中显示选定的... 查看详情

使用 jQuery 设置下拉列表的选定索引

...0-11-2119:17:37【问题描述】：如果我找到控件的方式如下，如何在jQuery中设置下拉列表的索引：$("*[id$=\'"+originalId+"\']")我这样做是因为我正在动态创建控件，并且由于在使用Web窗体时会更改id，因此我发现这是为我找到一些控件的... 查看详情