第一步:将需要联想的词在页面加载的时候就加载到页面
例如:放到隐藏于中
<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>