#txt{
width:180px;
}
#completeDiv{
width:180px;
border:1px solid #C6C6C6;
display:none;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
li{
list-style: none;
margin:0px;
padding:2px;
font-size:12px;
}
.over{
background:#83E7AF;
color:#ffffff;
cursor: default;
}
然后我们在页面引入相应的css和js 包括相应的jquery的js
$(document).ready(function(){
var indexLi = -1;
$('#txt').keyup(function(event){
if(event.keyCode==38){ //上e
indexLi --;
if (indexLi < 0) {
indexLi = 9;
}
var li = $('li').eq(indexLi);
li.addClass('over').siblings().removeClass('over');
$('#txt').val(li.text());
}else if(event.keyCode==40){ //下
indexLi ++;
if (indexLi > 9) {
indexLi = 0;
}
var li = $('li').eq(indexLi);
li.addClass('over').siblings().removeClass('over');
$('#txt').val(li.text());
}else if(event.keyCode==27){ //ESC
$('#completeDiv').hide();
}else if(event.keyCode==13){ //回车 回车是跳到百度去了
window.location.href = "http://www.baidu.com/s?wd=" + $('#txt').val();
}else{
var t = $('#txt').val(); //文本框输入的值
// alert("123123"); //键盘按下 通过getJSON里面的连接请求相应的.do然后把当前的输入框文本传过去进行模糊匹配，并且返回相应的集合数组
$.getJSON('/shunfengcheWeb/aoutSearch.do',{"txt":t},function(data){
if(data==null){
$('#completeDiv').hide(); //层隐藏 首先我们要设置隐藏
return ;
}
$('#completeDiv').empty(); //清空层内容 当重新遍历时清空原先的数据
var ul = $('<ul></ul>');
$.each(data,function(index,item){ //遍历数据 //开始遍历数组
var li = $('<li></li>')
.text(item)
.mouseover(function(){
$(this).addClass('over')
.siblings().removeClass('over');
indexLi = index;
}).click(function(){
$('#txt').val($(this).text());
$('#completeDiv').hide();
});
ul.append(li);//创见相应的ul和li并把查询的数据复制
});
$('#completeDiv').append(ul).show(); //显示层回显到页面
});
}
});
});
页面jsp
<script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/complete.js"></script>
</head>
<body>
<div>
<input type="text" id="txt"/>
<div id="completeDiv">
</div>
</div>
</body>
|
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
(function($){
$.fn.extend({
loadSelect:function(opt){
var defaultOpt={
url:"select.json",
pid:""
};
var opts = $.extend(defaultOpt,opt);
var $this=$(this);
$.getJSON(opts.url,function(json){
var html='<select onchange="javascript:$(this).selectSelect()"><option value="0">请选择</option>';
$.each(json,function(i,n){
html+= '<option value="'+n.id+'">'+n.text+"</option>\n";
});
html += "</select>\n";
$this.append(html);
});
},
selectSelect:function(opt){
var defaultOpt={
url:"select_data.json",
pid:""
};
var opts = $.extend(defaultOpt,opt);
var $this=$(this);
$this.nextAll().remove();
$.getJSON(opts.url,function(json){
var html='<select onchange="javascript:$(this).selectSelect(this)"><option value="0">请选择</option>';
$.each(json,function(i,n){
html+= '<option value="'+n.id+'">'+n.text+"</option>\n";
});
html += "</select>\n";
$this.after(html);
});
}
});
})(jQuery);
$(function(){$("#cascade").loadSelect({url:"select_data.json"});});
</script>
</head>
<body>
<div id="cascade">
</div>
</body>
</html>
|
