仿百度联想词列表

来源：互联网发布：淘宝怎么拍下宝贝编辑：程序博客网时间：2024/05/02 23:57

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

例如：放到隐藏于中

<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>