/**
* @author zhangxq
* @param inputid
* 输入框的ID
* 初始化里面的keyword 为输入框的ID
*/
//{border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}
$(document).ready(function(){
$("#keyword").css({"padding":"5px 8px 2px 6px","height":"24px","font-size":"large","border":"solid","border-width":"1px thin thin 1px","border-color":"#CCCCCC #999999 #999999 #CCCCCC"});
$("#keyword").attr("title","搜罗搜索");
});
var key_value = 0;//键盘对应的值
InTellMsg = function (inputid ,arr) {
removediv();
inputid = "#"+inputid;
var width = $(inputid).outerWidth();
var input_postion = $(inputid).position();
var table = $("<table></table>").attr("id","msg_table");
$("#msg_table").css({"border":"solid 1px red"});
var cur_value = 0;
var mouse_cur_value = 0;
var flag ="true";
var pre_flag = "next";
$("<div ></div>").attr("id","intellmsgdiv").appendTo(document.body);
$("#intellmsgdiv").css({"width":width-2,"vertical-align":"top","height":"auto",
"position":"absolute","left":input_postion.left,"top":input_postion.top+29+"px",
"margin-top":"-1px","z-index":"100","border":"solid", "border-color":"#A2BFF0 #558BE3 #558BE3 #A2BFF0","border-width":"1px","overflow":"hidden"});
$("#intellmsgdiv").append(table);
var num =arr.length;
for(var i=0;i< arr.length ;i++){
$("#msg_table").append("<tr height='25px' style='font-size: 18px;'><td style='padding-left:8px;'>"+arr[i]+"</td></tr>");
}
// $("#msg_table").css({"width":(width+3)+"px", "border":"10px"});
$("#msg_table").css({"background":"white","width":(width+3)+"px","margin":"-2px -3px -2px -2px","overflow":"hidden"});
$("#msg_table tr").hover(
function () {
if(flag =="true"){
var trs = table.children().children();
var index = cur_value-1 ;
if(cur_value== 0 ){
index = 0;
}
$(trs[index]).addClass("tr_off");
$(trs[index]).removeClass("tr_on");
$(this).addClass("tr_on");
$(this).removeClass("tr_off");
cur_value = $(this).index() ;
mouse_cur_value = $(this).index() ;
}
},
function (){
$(this).addClass("tr_off");
$(this).removeClass("tr_on");
}
);
document.onkeydown = function(event){
var currdiv = document.getElementById('intellmsgdiv');
event = (event) ? event : window.event;
key_value = event.keyCode ;
var key = event.keyCode ;
var trs = table.children().children();
var index =0;
var tds;
var tr_num = trs.length ;
if(key=='40'){
if(pre_flag=="pre"){
cur_value ++;
}
pre_flag ="next";
flag = "false";
$(trs[mouse_cur_value]).addClass("tr_off");
$(trs[mouse_cur_value]).removeClass("tr_on");
if(cur_value!= tr_num ){
$(trs[cur_value -1]).addClass("tr_off");
$(trs[cur_value -1]).removeClass("tr_on");
}
$(trs[cur_value]).addClass("tr_on");
$(trs[cur_value]).removeClass("tr_off");
cur_value ++;
if(cur_value>tr_num){
cur_value = tr_num ;
}
// 这个计算和下面的计算放置的位置不一样,所以会出现不同的结果
if(cur_value==0){
index = cur_value;
}else if(cur_value==tr_num){
index = tr_num -1;
}else{
index = cur_value -1 ;
}
tds = $(trs[index]).children();
if(currdiv!=null){
$(inputid).val($(tds[0]).text());//set value
}
}else if(key =='38'){
if(pre_flag=="next"){
cur_value --;
}
pre_flag = "pre";
if(cur_value == tr_num){
index = tr_num -1;
}else if(cur_value == 0){
index = cur_value;
}else{
index = cur_value -1 ;
}
if(cur_value != 0){
$(trs[cur_value]).addClass("tr_off");
$(trs[cur_value]).removeClass("tr_on")
}
$(trs[cur_value -1]).addClass("tr_on");
$(trs[cur_value -1]).removeClass("tr_off");
cur_value --;
if(cur_value < 0){
cur_value = 0 ;
}
tds = $(trs[index]).children();
if(currdiv!=null){
$(inputid).val($(tds[0]).text());//set value
}
}
flag = "false";
};
$("#msg_table").bind("mousemove",function(event){
flag = "true";
});
$("#msg_table td").bind("click",function(event){
$(inputid).val($(this).text());
});
}
removediv = function(){
$("#intellmsgdiv").remove();
}
document.onclick = function(){
removediv();
}
searchIntell = function(inputid ,inputval){
if(key_value ==38 || key_value ==40 || key_value == 37 || key_value == 39|| key_value == 16){
return false;
}
var v = $("#"+inputid).val();
if(v==null || v==""){
return false;
}
var arr = new Array(10);
for(var i=0;i<10;i++){
arr[i]=i;
}
InTellMsg(inputid,arr);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.tr_on {background-color:#D5E2FF;height:25px;};
.tr_off {background-color:white;height:25px;};
</style>
<script type="text/javascript" src="jquery1.4.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<center>
<form action="./searchpicture.do" id="form1" method="get" >
<input type="text" autocomplete="off" id="keyword" style="width:500px" value="" name ="keyword" onkeyup="searchIntell('keyword',this.value);" />
<input type="button" value="搜索搜索" >
</form>
</center>
</body>
</html>
PS:本人样式是在差,需要的朋友可以自行修改
- 大小: 10.6 KB
分享到:
相关推荐
JQuery实现智能输入提示(仿机票预订网站)
主要为大家详细介绍了基于jquery实现智能提示控件intellSeach.js的相关资料,感兴趣的小伙伴们可以参考一下
jquery实现智能提示框,当鼠标放到头像上时,会弹出一个层,层的位置会根据头像距浏览器顶部的距离来显示。当距离大于层的高度,层就在头像的上面,当距离小于层的高度,层就在下面。
jQuery在实现Vs2008下智能提示【插件】.mht;vs2008 jquery提示补丁VS90SP1-KB958502-x86.exe;jquery-1.3.2-vsdoc2.js;jquery-1[1].3.2-vsdoc2.js都有
jQuery搜索框自动提示代码基于jquery.1.8.2.js制作,利用JsonpAjax.js制作搜索框输入文字提示下拉框代码,ajax数据调用的是百度文字库。
代码摘自网络,经过自己改进 利用jquery+ajax+text 通过jsp+servlet实现仿百度智能提示(数据库用的oracle,不限)
JQuery插件Suggest来做那些机票预订网站中的输入智能提示功能,这个功能对于用户体验性来说,挺不错的,用于实现类似百度的智能提示功能也是一个不错的选择。
最新jQuery实现浮动气泡步骤引导提示代码 最新jQuery实现浮动气泡步骤引导提示代码
jquery Tooltip简易文本提示框插件
本jquery实现类似淘宝详情页“宝贝详情”、“交易详情”等按钮的固定,即使下拉滚动条它都会浮动定位在右上方,直到你关闭小时提示框。
本文实例讲述了jquery+ajax+text文本框实现智能提示的方法。分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { ...
jquery 1.6.2 全套文件(含纠错后的智能提示文件!1.6.2-vsdoc.js )
1.搜索框输入文本,根据搜索框文本变化情况即时通过Ajax向数据库查询搜索建议,并把建议反馈到搜索框下方的搜索建议框中,无搜索建议时自动隐藏建议框边框。 2.数据源从SQL提取解析成XML文档碎片
jquery输入框提示插件input输入框文字下拉提示添加标签代码
jquery.autocomplete.min.js插件 仿google实现自动补全
jquery实现input搜索输入关键词后自动筛选相关信息效果
NULL 博文链接:https://earon.iteye.com/blog/1318268