素材牛VIP会员

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

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

 浏览:754次  评论:1次  更新时间:2019-10-14
牛币素材VIP可免积分下载
jQuery+Ajax搜索框输入文字自动补全网页特效
积分说明:注册即送10牛币,每日签到可获得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
所需牛币:10 开始下载

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