输入自动提示搜索提示功能的javascript:sugggestion.js
2024-05-06 14:36:09
供稿：网友
代码如下:
/**
* 功能:该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");
