发布于 2016-10-11 07:16:08 | 165 次阅读 | 评论: 2 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
/**
* 功能:该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值是否超出列表数目界限
//超出的话就将cursor_now_position值变为初始值
SugObj.cursor_now_position = -1;
//并将文本框中值设为用户用于搜索
$("#"+SugObj.keywords_input_id+"").val(SugObj.keywords_input_value);
//去掉提示结果的样式
$("#showDataTable tr").css("background","#fff");
}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");
}
}//End if
});
//光标离开输入框时隐藏搜索提示
$("#"+SugObj.keywords_input_id+"").blur(function(){
var intId = window.setInterval(function(){
$("#"+SugObj.suggestion_div_id+"").css("display","none");
window.clearInterval(intId);
},200);
$("#"+SugObj.suggestion_div_id+" tr.line").click(function(){
window.clearInterval(intId);
$("#"+SugObj.keywords_input_id+"").val($(this).text());
$("#"+SugObj.keywords_input_id+"").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(0);
});
$("#"+SugObj.suggestion_div_id+" tr.moreline").click(function(){
window.clearInterval(intId);
$("#"+SugObj.keywords_input_id+"").focus();
SugObj.cursor_now_position = -1;
runSearchAjax(1);
});
});
});
//isMore为1:多于二十条则只显示二十条,少于二十条,则有多少显示多少
//isMore为0:多于十条则只显示十条,少于十条,则有多少显示多少
function runSearchAjax(isMore) {
$.ajax({
type:"GET",
dataType:"json",
url:$("#"+SugObj.keywords_input_id+"").attr("searchURL"),
data:{
"keywords_input":escape($("#"+SugObj.keywords_input_id+"").val())
},
success:function(data,status) {
if (data.sugList == null || data.sugList == undefined || data.sugList.length == 0) {
$("#"+SugObj.suggestion_div_id+"").empty();
$("#"+SugObj.suggestion_div_id+"").css("display","none");
} else {
//var result = $.parseJSON(data.sugList);
var result = data.sugList;
var dataArray = [];
$.each(result,function(i,value){
dataArray.push(value);
});
//获取记录的个数
var dataItemLength = dataArray.length;
if (dataItemLength <= 0) {
return; //搜索提交结果为0,则返回
}
var layerLabel = [];
layerLabel.push(" <table id='showDataTable' width='100%'> ");//创建一个table
if (isMore == 0) {
if (dataItemLength <= SugObj.default_showItem_count) {
for (var i = 0; i < dataItemLength; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}else{
for (var i = 0; i < SugObj.default_showItem_count; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr>");
}
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='moreline'><td style='padding-left:"+(SugObj.keywords_input_width-56)+"px'> ");
layerLabel.push(" <span style='cursor:pointer;'>more...</span></td></tr> ");
}
}else if (isMore == 1) {
if (dataItemLength <= SugObj.more_showItem_count) {
for (var i = 0; i < dataItemLength; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}else{
for (var i = 0; i < SugObj.more_showItem_count; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}
}else{
for (var i = 0; i < dataItemLength; ++i) {
layerLabel.push(" <tr style='cursor:pointer;color:"+SugObj.keywords_input_color+";font-size:"+SugObj.keywords_input_font_size+"' ");
layerLabel.push(" class='line' ><td>"+dataArray[i]+"</td></tr> ");
}
}
layerLabel.push("</table>");
var layer = layerLabel.join("");
//显示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","block");
//先清空#searchResult下的所有子元素
$("#"+SugObj.suggestion_div_id+"").empty();
//将刚创建的table插入到#searchResult内
$("#"+SugObj.suggestion_div_id+"").append(layer);
$("#showDataTable tr").css("color",SugObj.keywords_input_color);
$("#showDataTable tr").css("font-size",SugObj.keywords_input_font_size);
//监听提示框的鼠标悬停事件
$("tr.line").hover(function(){
$("tr.line").css("background","#fff");
$(this).css("background","#c0c0c0");
},function(){
$(this).css("background","#fff");
});
}
}
});
}
//输入框的坐标发生变化
function ChangeCoords() {
//获取距离最左端的距离，像素，整型
var left = $("#"+SugObj.keywords_input_id+"").offsetLeft;
//获取距离最顶端的距离，像素，整型
var top = $("#"+SugObj.keywords_input_id+"").offsetTop+keywords_input_height;
//重新定义CSS属性
$("#"+SugObj.suggestion_div_id+"").css("left",left+"px");
$("#"+SugObj.suggestion_div_id+"").css("top",top+"px");
}
//监听搜索提示结果的鼠标单击事件
function hoverAction(data) {
//隐藏搜索提示DIV
$("#"+SugObj.suggestion_div_id+"").css("display","none");
//将点击数据加入到搜索提示输入框中
$("#"+SugObj.suggestion_div_id+"").val(data);
//将光标聚焦在搜索提示输入框中
$("#"+SugObj.suggestion_div_id+"").focus();
//将cursor_now_position值变为初始值
cursor_now_position = -1;
//运行Ajax方法,向服务器发送请求
runSearchAjax(0);
}
//窗体的大小改变会触发resize()事件，只需在该事件内调用ChangeCoords()方法即可
$(window).resize(ChangeCoords);