素材牛VIP会员

jQuery+Ajax搜索框输入文字自动补全网页特效

?所属分类:网页特效-输入/选择框/联动,加载/自动/搜索

?浏览:7次- ?下载:0次- ?评论:1次- ?更新时间:2019-10-14
jQuery+Ajax搜索框输入文字自动补全网页特效
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!???充值积分???充值会员???更多说明?
素材描述:jQuery+Ajax搜索框输入文字自动补全代码,一款利用Ajax实现的仿百度搜索自动补全下拉框显示相关列表选项效果。

详细介绍

JsonpAjax.js包含代码

$(function(){
//当键盘键被松开时发送Ajax获取数据
		$('#text').keyup(function(){
			var keywords = $(this).val();
			if (keywords=='') { $('#word').hide(); return };
			$.ajax({
				url: 'http://suggestion.baidu.com/su?wd=' + keywords,
				dataType: 'jsonp',
				jsonp: 'cb', //回调函数的参数名(键值)key
				// jsonpCallback: 'fun', //回调函数名(值) value
				beforeSend:function(){
					$('#word').append('
正在加载。。。
'); }, success:function(data){ $('#word').empty().show(); if (data.s=='') { $('#word').append('
Not find "' + keywords + '"
'); } $.each(data.s, function(){ $('#word').append('
'+ this +'
'); }) }, error:function(){ $('#word').empty().show(); $('#word').append('
Fail "' + keywords + '"
'); } }) }) //点击搜索数据复制给搜索框 $(document).on('click','.click_work',function(){ var word = $(this).text(); $('#text').val(word); $('#word').hide(); // $('#texe').trigger('click');触发搜索事件 }) })

文件目录结构

  • ┝ index.html
  • public
    • ┝ jquery.js
    • ┝ JsonpAjax.js

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

零***落??
2019年10月14日

仿天猫的实用搜索框输入文字自动补全

回复
?文明上网,理性发言!????? 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:0
所需牛币:10 开始下载

牛币获取:签到、评论、充值????? 在线充值(10牛币=1元)