输入自动提示搜索提示功能的javascript:sugggesti

时间: 作者:正织

  

[自动提示,自动搜索提示]输入自动提示搜索提示功能的javascript:sugggestion.js

   代码如下:
  
/**  
* 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度、google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验  
* 使用说明:参见suggestions.txt文件  
* Author:sunfei(孙飞) Date:2013.08.21  
*/  
var SugObj = new Object();  
  
$(document).ready(function(){  
  
//文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示效果保持一致  
//使用搜索提示功能输入框默认ID  
SugObj.keywords_input_id = "keywords_input";  
//搜索输入框高度  
SugObj.keywords_input_height = $("#"+SugObj.keywords_input_id+"").height();  
//搜索输入框宽度  
SugObj.keywords_input_width = $("#"+SugObj.keywords_input_id+"").width();  
//搜索输入框宽度字体颜色  
SugObj.keywords_input_color = $("#"+SugObj.keywords_input_id+"").css("color");  
//搜索输入框宽度字体大小  
SugObj.keywords_input_font_size = $("#"+SugObj.keywords_input_id+"").css("font-size");  
//用户输入的值  
SugObj.keywords_input_value = null;  
  
//设置显示搜索提示div的样式  
//显示提示信息的DIV的ID  
SugObj.suggestion_div_id = "sug_layer_div";  
//默认的提示信息DIV样式  
$("#"+SugObj.suggestion_div_id+"").addClass("sugLayerDiv");  
//根据输入框设置DIV宽度  
$("#"+SugObj.suggestion_div_id+"").css("width",SugObj.keywords_input_width);  
//$("#"+SugObj.suggestion_div_id+"").css("position","relative");  
//$("#"+SugObj.suggestion_div_id+"").css("overflow","hidden");//DIV 内容溢出时隐藏  
//$("#"+SugObj.suggestion_div_id+"").css("background","#fff");//DIV 背景颜色  
//$("#"+SugObj.suggestion_div_id+"").css("border","#c5dadb 1px solid");//DIV 边框样式  
//$("#"+SugObj.suggestion_div_id+"").css("display","none");//DIV 初始隐藏  
  
//提示结果默认显示提示数目  
SugObj.default_showItem_count = 10;  
//设定点击"more"所显示数目  
SugObj.more_showItem_count = 20;  
//标记上下键时所处位置  
SugObj.cursor_now_position = -1;  
});  
  
  
//性能考虑:如果用户每输入一个字母就立即往服务器传的的话,服务器的承载就会过大,  
//于是考虑可以将每次请求延迟0.5s发送(待考虑)  
  
$(document).ready(function(){  
  
//输入框的id为keywords_input,这里监听输入框的keyup事件  
$("#"+SugObj.keywords_input_id+"").keyup(function(event){  
if((event.keyCode >= 48 && event.keyCode <=57) || (event.keyCode >= 96 && event.keyCode <= 105) ||  
(event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode == 8)) {  
//获取输入框的值?

  
var kw = $("#"+SugObj.keywords_input_id+"").val();  
//去掉输入字符串两端的空格  
kw = kw.replace(/(^\s*)|(\s*$)/g,"");  
if (kw == "") {  
//清空DIV内容  
$("#"+SugObj.suggestion_div_id+"").empty();  
//隐藏DIV  
$("#"+SugObj.suggestion_div_id+"").css("display","none");  
} else {  
//将用户输入值保存到SugObj对象中  
SugObj.keywords_input_value = kw;  
//运行Ajax请求结果  
runSearchAjax(0);  
}  
}else if(event.keyCode == 38) { //Up Arrow  
if (--SugObj.cursor_now_position == -1) {//判断自减一后是否已移到文本框  
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);  
//去掉提示结果的样式 #fff-白色  
$("#showDataTable tr.line").css("background","#fff");  
}else if(SugObj.cursor_now_position == -2) {//已在文本框后按Up-Arrow移到最后一行  
//搜索提示结果索引从0开始  
var index = $("#showDataTable tr.line").length - 1;  
//搜索提交结果为0,则返回  
if (index < 0) {  
return;  
}  
//取最后一个提示结果  
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[index]).text());  
$($("#showDataTable tr.line")[index]).siblings().css("background","#fff").end().css("background","#c0c0c0");  
SugObj.cursor_now_position = index;  
}else {  
$("#"+SugObj.keywords_input_id+"").val($($("#showDataTable tr.line")[SugObj.cursor_now_position]).text());  
$($("#showDataTable tr.line")[SugObj.cursor_now_position]).siblings().css("background","#fff").end().css("background","#c0c0c0");  
}  
}else if(event.keyCode == 40) { //Down Arrow  
var trCount = $("#showDataTable tr.line").length;  
if (++SugObj.cursor_now_position == trCount) {//判断加一操作后cursor_now_position值是否超出列表数目界限   (责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台