仿百度联想词列表

最新推荐文章于 2019-10-26 15:14:27 发布
最新推荐文章于 2019-10-26 15:14:27 发布
阅读量2.5k 收藏
点赞数
分类专栏： Web前端

第一步：将需要联想的词在页面加载的时候就加载到页面

例如：放到隐藏于中

<div style="display:none;">					
								<ul class='dropL' id="ul_level1Tag_json"></ul>
								<ul class='dropL' id="ul_level2Tag_json"></ul>
								<ul class='dropL' id="ul_level3Tag_json"></ul>
								<ul class='dropL' id="ul_level4Tag_json"></ul>
							</div>

function initLabels(url, id) {
	$.get(url , function(data){
		var total = data.service.totalRecord;
		var result = data.service.result;
		var $ul = $('#ul_'+id);
		for(var i=0; i<total; i++) {						
			var record = result[i];
			var ope =  "<li id='"+record.id+"'>"+record.name+"</li>";
			$(ope).appendTo($ul);
		}
	});
}


第二步骤：需要联想的框加样式 

<tr><td>一级标签</td><td><input name="level1Tag_json" class="needCheck" value="${sdArticle.level1Tag_json}" style="width:300px;"/></td></tr>
								<tr><td>二级标签</td><td><input name="level2Tag_json" class="needCheck" value="${sdArticle.level2Tag_json}" style="width:300px;"/></td></tr>

第三步：重写方法，并通过样式关联到想加载联想词的输入框 

(function($){
	$.fn.assoc = function(){
		var index = -1;
		var _val = "";
		$(this).live('keyup',function(e){
			var $this = $(this);	
			var name = $(e.target).attr('name');	
			$this.parent().addClass('pos-r');
			$this.css({'display':'block'});
			var $html = $("#ul_"+name).html();
			//var lis = '<li>11dddd</li><li>22dddd</li><li>33dddd</li><li>44dddd</li>';
			//document.write($html+"====="+lis);			
			var $ul = $("<ul class='dropL'>"+$html+"</ul>");			
			var $d = $this.next('ul.dropL');
			$d.length=="0"?$ul.insertAfter($this).show():$d.show();
			$d = $this.next('ul.dropL');
			$d.css({width:$this.outerWidth()});
			
			$('ul.dropL li').live('mouseover',function(){
				this.style.background='#eee';
			}).live('mouseout',function(){
				this.style.background='';
			}).live('click',function(e){
				e= e||window.event;
				e.stopPropagation();
				$(this).parent().prev().val($(this).text());	
				$d.hide();
			})
			
			//键盘选值
			e=e||window.event;
			var _key = e.keyCode,_n = $d.find('li').length;
			if(_key!=40&&_key!=38&&_key!=37&&_key!=39){
				_val = $this.val();
				
				//$d.html('');//
				$d.children('li').each(function(){
					$(this).show();
				})
				$d.children('li').each(function(){
					var liHtml = $(this).html();
					var content = $(this).attr('content');				
					if(content.indexOf(_val) == -1 && liHtml.indexOf(_val) == -1) {
						$(this).hide();
					}
				});			
			};
			if(_key==40){//向下
				if(index >= _n){
					index=-1;				
				}
				index++;				
				while($d.find('li').eq(index).is(":hidden")) {
					index++;
				}
				$d.find('li').css('background','#fff')
				$d.find('li').eq(index).css('background','#eee');
				$this.val($d.find('li').eq(index).text());
				if(index==_n){
					$this.val(_val);
				}
			}else if(_key==38){//向上
				if(index < 0){
					index=_n;
					$this.val(_val);
				}else if(index==0){
					index=_n+1;
					$this.val(_val);
				}
				index--;
				while($d.find('li').eq(index).is(":hidden")) {
					index--;
				}
				$d.find('li').css('background','#fff');
				$d.find('li').eq(index).css('background','#eee');				
				$this.val($d.find('li').eq(index).text());
				if(index==_n){
					$this.val(_val);
				}
			}else if(_key==13){
				$('ul.dropL').hide();
			}
		});	
		$(document).bind('click',function(){
			$('ul.dropL').hide();
		});	
	}
})(jQuery);
$('.needCheck').assoc();



静态页面DEMO例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>仿百度联想词列表</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
(function($){
	$.fn.assoc = function(){
		var index = -1;
		var _val = "";
		$(this).live('keyup',function(e){
			var $this = $(this);		
			$this.parent().addClass('pos-r');
			$this.css({'display':'block'});
			var $ul = $("<ul class='dropL'><li>photoshop1</li><li>photoshop1</li><li>photoshop1</li><li>photoshop21</li><li>photoshop22</li><li>photoshop23</li><li>photoshop3</li></ul>");
			var $d = $this.next('ul.dropL');
			$d.length=="0"?$ul.insertAfter($this).show():$d.show();
			$d = $this.next('ul.dropL');
			$d.css({width:$this.outerWidth()});
			
			$('ul.dropL li').live('mouseover',function(){
				this.style.background='#eee';
			}).live('mouseout',function(){
				this.style.background='';
			}).live('click',function(e){
				e= e||window.event;
				e.stopPropagation();
				$(this).parent().prev().val($(this).text());	
				$d.hide();
			})
			
			//键盘选值
			e=e||window.event;
			var _key = e.keyCode,_n = $d.find('li').length;
			if(_key!=40&&_key!=38&&_key!=37&&_key!=39){
				_val = $this.val();
				
				//$d.html('');//
				$d.children('li').each(function(){
					$(this).show();
				})
				$d.children('li').each(function(){
					var liHtml = $(this).html();					
					if(liHtml.indexOf(_val) == -1) {
						$(this).hide();
						//$d.hide();
					}
					//else {
					//	$d.append($(this));
					//}
				});			
			};
			if(_key==40){//向下
				if(index >= _n){
					index=-1;				
				}
				index++;
				$d.find('li').css('background','#fff')
				$d.find('li').eq(index).css('background','#eee');
				while($d.find('li').eq(index).is(":hidden")) {
					index++;
				}
				$this.val($d.find('li').eq(index).text());
				if(index==_n){
					$this.val(_val);
				}
			}else if(_key==38){//向上
				if(index < 0){
					index=_n;
					$this.val(_val);
				}else if(index==0){
					index=_n+1;
					$this.val(_val);
				}
				index--;
				$d.find('li').css('background','#fff');
				$d.find('li').eq(index).css('background','#eee');
				$this.val($d.find('li').eq(index).text());
				if(index==_n){
					$this.val(_val);
				}
			}else if(_key==13){
				$('ul.dropL').hide();
			}
		});	
		$(document).bind('click',function(){
			$('ul.dropL').hide();
		});	
	}
})(jQuery);

</script>
<script>
$('.needCheck').assoc();
</script>
<style>
*{ margin:0; padding:0; list-style:none; font-size:12px;}
.dropL{ border:1px solid #ccc; position:absolute; display:none; background:#fff; z-index:999}
.dropL li{ line-height:25px; height:25px; background:#fff; padding:0 5px; display:block; color:#666; cursor:pointer}
</style>
</head>

<body>

<input placeholder="输入你的专长技能" class="needCheck" type="text"><br />
<br />
<input placeholder="输入你的专长技能" class="needCheck" type="text">
</body>
</html>




Jredreamer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿百度搜索关键字联想词.zip
04-08
仿百度搜索关键字联想词自动匹配源码，很简单就一个html文件，一个css文件，一个js文件。很实用，在项目中正好使用，所以给大家分享一下。
（四）联想词和top热词的设计与开发
rg201612的博客
11-01 843
搜索联想词和top热词的设计与开发
搜索词联想功能实现方案
热门推荐
搬砖的老牛
10-26 1万+
需求背景： 实现搜索框的搜索联想功能，当输入框输入字符时候，立刻进行网络请求，将相关推荐展示在下方的列表中，要求每次展示的一定是当前最新输入的内容的推荐词。 实现思路： 展示搜索词联想需要满足如下三点： 1.搜索框输入内容发生变化需要立刻进行网络请求搜索关联词汇 2.搜索词输入内容变化较快，需要保证每次展示出来的联想词都是输入框中最新的输入内容所对应的联想词 3.每当有新的请求时候需要及时取消掉...
仿百度搜索框支持拼音 输入联想
hxc506896582的专栏
06-10 4550
输入联想                 *{             margin: 0;             padding: 0;         }         input{             font-size: 20px;             padding: 5px ;             margin: 10px 0;        
Android 输入法联想功能
numen_2010的专栏
06-26 7556
参考 http://www.linuxidc.com/Linux/2012-01/51684.htm 1. 何为Android的输入法联想功能 在Android Settings 应用中有个“用户词典” 的应用，该应用是跟“android 键盘” 输入法相关联，当该应用添加一些单词，词组什么的在"用户词典"应用的数据库中时，对应的androiid 输入法将会联想到对应的单词或词组。假如
仿google、百度的联想输入
yangwlqi的专栏
12-14 151
前段时间公司有个需求，要求用户输入时能够像google、百度输入框那样提示相关信息。 思路很简单，通过ajax与后端交互获取结果集，问题是获得结果集如何足够快？我想问题的关键应该是在如何建索引，以及索引如何存储，才能检索速度够快。 和朋友讨论过基于汉字拼音等等方式，问题是自己写存储和检索的成本实在太高（其实是不会，现学现卖也不太现实）。 后来还是用lucene实现，自己写了个前缀分词器（姑且...
仿百度联想词下拉列表，键盘上下键选值
05-28
仿百度联想词下拉列表，可以通过键盘上下键选值
使用ajax访问后台数据库，仿照百度联想词输入。
08-16
使用ajax访问后台数据库，仿照百度联想词输入。
仿百度搜索框的联想词提示效果js代码.zip
07-11
<!... <... <head> ...meta charset="utf-8" />...仿百度搜索框的联想词提示效果js代码<... 这是一款纯javaScript实现的仿百度搜索框联想词提示代码，搜索框输入文字自动提示相关联想词js特效。
JS百度搜索框联想词提示特效代码
03-20
JS百度搜索框联想词提示代码是一款纯javaScript仿百度搜索框联想词提示代码。
百度联想词搜索框完整实现
01-21
利用百度接口仿写一个搜索联想词功能，便于用户能更快得到想要的关键词而进行搜索，用自制的网页来实现搜索关键字联想效果。
输入框下拉筛选值效果,类似百度搜索框
03-10
这是一个改自基金查询的效果，有些缺点，希望高人能给予修正，不过基本还是可以用。。
仿百度搜索(智能提示)
07-17
仿百度只能搜索，下载后改数据库连接方式即可使用，无兼容性问题，仿百度输入框
输入框自动联想提示
09-25
插件使用配置（config）还是很灵活的，当然也是弊端，配置不当，效果就没了。 使用时候，重要的参数如下(此demo参数配置点击右键看源码)： url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1', queryName: 'q', //url?queryName=value,默认为输入框的name属性 jsonp: 'callback', //设置此参数名，将开启jsonp跨域功能（我要调淘宝数据，非跨域不可，淘宝的回调参数名就是callback），否则使用json数据结构 item: 'li', //下拉提示项目单位的选择器，默认一个li是一条提示，与processData写法相关。 processData: function(data){ }//自定义处理返回的数据，该方法可以return一个html字符串或jquery对象，将被写入到提示的下拉层中。 右键查看源码，将看到本demo所编写的processData函数是怎样的，所以这个参数是把如何表现交给你来做了，但别忘了配合 item 参数 getCurrItemValue: function($currItem){ }//定义如何去取得当前提示项目的值并返回值,插件根据此函数获取当前提示项目的值，并填入input中，此方法应根据processData参数来定义。 是的，如果你自定义了processData，这个参数恐怕也需要自定义，默认是获取$currItem.html()，你也可以return $currItem.attr('an attrName'); 右键查看源码，将看到本demo所编写的getCurrItemValue函数是怎样的 textchange: function($input){}, //不同于change事件在失去焦点触发，inchange依赖本插件，只要内容有变化，就会触发，并传入input对象 onselect: function($currItem){} //当选择了下拉的当前项目时执行，并传入当前项目。比如选择了某个提示项目，就提交表单。 sequential: 0, //按着方向键不动是否可以持续选择，默认不可以，设置值可以是任何等价的boolean
仿百度输入框仿百度输入框(ajax关联后台)
06-07
可能根据输入模糊关联数据库，实现类似百度输入框
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
vue输入框联想词功能
08-29
在computed属性中，我们可以根据输入框的值和数据源进行过滤，返回一个符合条件的联想词列表。 然后，我们可以使用watch属性来监听输入框的值的变化。当输入框的值改变时，watch属性会触发相应的回调函数，我们可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值