自己做的基于XML数据的JS(json格式)智能提示
俺花了不少精力才把智能提示做到这样，不知道里面有没有缺陷，希望大家来帮我寻找Bug。
数据文件（将以下红色文本复制到记事本里，重命名文件为“auto_prompt.xml”，并保存到桌面的“xmlfile”文件夹）：
js脚本文件（将以下红色文本复制到记事本里，重命名文件为“auto_prompt.js”，并保存到桌面的“jsfile”文件夹）：
/****************************
Author: zhouych
CreateTime: 2010/05/20 23:00:00
E-Mail: [email protected]
MSN:[email protected]
QQ:120839964
CSDN:zhouych329
****************************/
/****************** Begin $ ******************/
//页面元素对象，根据ID获取
var $ = function(id){
return (id.constructor == String) ? document.getElementById(id) : id;
}
/****************** Begin $ ******************/
/****************** Begin Message ******************/
//Message保存显示的title和count
//分别与auto_prompt.xml中节点title和count对应
Message = {
title:"",
count:""
}
/****************** End Message ******************/
/****************** Begin GlobalVar ******************/
//全局变量保存一些标签ID、元素属性、中间数据、文件路径等
GlobalVar = {
Empty:"",
Data:null,
Xml_Doc:null,
Xml_Path:"xmlfile/auto_prompt.xml",
Div_Position:null,
Temp_Div:null,
Temp_Text:null,
Is_Flag_Temp_Text:true,
Text_Id:"titletext",
Button_Id:"btnSearch",
Root_Id:"rootdiv",
Div_Id:"promptdiv",
Title_Div_Id_Prefix:"div_",
Title_Div_Title_Id_Prefix:"div_title_",
Title_Div_Title:{
PaddingTop:"2px",
PaddingBottom:"2px"
},
Title_Div_Count_Id_Prefix:"div_count_",
Div_Property_Value:{
width:["430px","430px"],
height:["auto","auto"],
border:["1px solid black",""],
overflowY:["auto","hidden"],
whiteSpace:["nowrap",""],
backgroundColor:["#F5FFFA","#F5FFFA","#87CEEB"],
display:["none","block","inline"],
styleFloat:["left","right"],
cursor:["default","auto","hand"]
},
Elmt_Type:{
input:"input",
div:"div",
button:"button"
},
Elmt_Event:{
OnClick:"onclick",
OnKeyDown:"onkeydown",
OnKeyUp:"onkeyup"
},
Text_Property:{
Type:["text","submit"],
Size:["60"]
},
Text_Height:"23px",
Absolute:["absolute"]
}
/****************** End GlobalVar ******************/
/****************** Begin OperateXML ******************/
//操作XML格式数据源，并保存到全局变量当中
OperateXML = {
//根据不同浏览器（IE、FireFox等）创建XML文档对象
CreateXMLDoc:function() {
if(window.ActiveXObject)
{
GlobalVar.Xml_Doc = new window.ActiveXObject("Microsoft.XMLDOM");
GlobalVar.Xml_Doc.async = "false";
GlobalVar.Xml_Doc.load(GlobalVar.Xml_Path);
OperateXML.IEGetValue();
}
else if (window.implementation && window.implementation.createDocument)
{
GlobalVar.Xml_Doc = window.implementation.createDocument("","",null);
GlobalVar.Xml_Doc.load(GlobalVar.Xml_Path);
//火狐浏览器待定
}
},
//支持IE浏览器的解决方案
IEGetValue:function() {
GlobalVar.Data = new Array();
var nodes = GlobalVar.Xml_Doc.documentElement.childNodes;
for(var i = 0 ; i < nodes.length ; i++)
{
Message = {title:nodes[i].childNodes[0].text, count:nodes[i].childNodes[1].text};
GlobalVar.Data[i] = Message;
}
AutoPrompt.CreateTag($(GlobalVar.Root_Id), GlobalVar.Elmt_Type.input, GlobalVar.Text_Id);
AutoPrompt.TextEvent.SetPropertyAndEvent($(GlobalVar.Text_Id));
$(GlobalVar.Text_Id).style.height = GlobalVar.Text_Height;
$(GlobalVar.Text_Id).style.lineHeight = GlobalVar.Text_Height;
AutoPrompt.CreateTag($(GlobalVar.Root_Id), GlobalVar.Elmt_Type.div, GlobalVar.Div_Id);
AutoPrompt.PromptDiv.SetProperty($(GlobalVar.Div_Id),0);
$(GlobalVar.Div_Id).style.cursor = GlobalVar.Div_Property_Value.cursor[0];
$(GlobalVar.Div_Id).style.position = GlobalVar.Absolute[0];
window.document.body.attachEvent(GlobalVar.Elmt_Event.OnClick, function() { AutoPrompt.ElmtBody(); } );
},
//支持FireFox浏览器的解决方案
FireFoxGetValue:function() {
//火狐浏览器待定
}
}
/****************** End OperateXML ******************/
/****************** Begin AutoPrompt ******************/
//智能提示逻辑处理
AutoPrompt = {
//获得鼠标位置
GetMousePos:function(ev) {
if(ev.pageX || ev.pageY)
return {x:ev.pageX, y:ev.pageY};
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
},
//单击window.document.body时发生
ElmtBody:function(){
if($(GlobalVar.Div_Id).style.display === GlobalVar.Div_Property_Value.display[0])
return;
var autopos = GlobalVar.Div_Position;
var mousepos = AutoPrompt.GetMousePos(window.event);
if(GlobalVar.Div_Position===null)
return ;
if(!(mousepos.x >= autopos.x && mousepos.x <= autopos.r && mousepos.y >= autopos.t && mousepos.y <= autopos.y))
{
$(GlobalVar.Div_Id).style.display = GlobalVar.Div_Property_Value.display[0];
$(GlobalVar.Text_Id).value = GlobalVar.Temp_Text;
}
},
//创建HTML标签元素
CreateTag:function(parent_node,tag_name,tag_id) {
if($(tag_id) !== null) return ;
var tag = document.createElement(tag_name);
tag.id = tag_id;
parent_node.appendChild(tag);
},
/****************** Begin AutoPrompt.PromptDiv ******************/
//智能提示层相关操作
PromptDiv:{
//获取HTML标签与window.document前后左右边界的距离信息
GetPosition:function(e) {
var top = e.offsetTop;
var left = e.offsetLeft;
var height = e.offsetHeight;
var width = e.offsetWidth;
while(e = e.offsetParent)
{
top += e.offsetTop;
left+= e.offsetLeft;
}
return {x:left ,y:top+height,r:left+width,t:top};
},
//设置Div样式
SetProperty:function(e,index) {
e.style.width = GlobalVar.Div_Property_Value.width[index];
e.style.height = GlobalVar.Div_Property_Value.height[index];
e.style.border = GlobalVar.Div_Property_Value.border[index];
e.style.overflowY = GlobalVar.Div_Property_Value.overflowY[index];
e.style.backgroundColor = GlobalVar.Div_Property_Value.backgroundColor[index];
e.style.whiteSpace = GlobalVar.Div_Property_Value.whiteSpace[index];
e.style.display = GlobalVar.Div_Property_Value.display[index];
var position = AutoPrompt.PromptDiv.GetPosition($(GlobalVar.Text_Id));
e.style.left = position.x;
e.style.top = position.y;
},
//智能提示层（DIV）的相关事件
PromptDivEvent:{
//鼠标悬浮在HTML标签元素上时发生
MouseOver:function(e,flag){
AutoPrompt.PromptDiv.ChangeDivColor(e,flag);
},
//单击HTML标签时发生
Click:function(e){
$(GlobalVar.Text_Id).value = e.childNodes[0].innerText;
e.parentNode.style.display = GlobalVar.Div_Property_Value.display[0];
GlobalVar.Temp_Div = null;
}
},
//改变DIV的背景及其其他操作
ChangeDivColor:function(e,flag) {
if(e === null)
{
GlobalVar.Temp_Div.style.backgroundColor = GlobalVar.Div_Property_Value.backgroundColor[1];
GlobalVar.Temp_Div = null;
$(GlobalVar.Text_Id).value = GlobalVar.Temp_Text;
return ;
}
e.style.backgroundColor = GlobalVar.Div_Property_Value.backgroundColor[2];
if(flag)
$(GlobalVar.Text_Id).value = e.childNodes[0].innerText;
GlobalVar.Is_Flag_Temp_Text = false;
if(GlobalVar.Temp_Div !== null && GlobalVar.Temp_Div !== e)
GlobalVar.Temp_Div.style.backgroundColor = GlobalVar.Div_Property_Value.backgroundColor[1];
GlobalVar.Temp_Div = e;
}
},
/****************** End AutoPrompt.PromptDiv ******************/
/****************** Begin AutoPrompt.TextEvent ******************/
//智能提示文本框相关处理函数
TextEvent:{
//获取字符串的字节数
GetBytesCount:function(str) {
var count = 0;
if (str != null)
{
for (var i = 0; i < str.length; i++)
{
var c = str.charAt(i);
if (/^[/u0000-/u00ff]$/.test(c))
{
count += 1;
}
else
{
count += 2;
}
}
}
return count;
},
//去掉字符串两端空格
Trim:function(value) {
return (value.replace(/^/s*/,GlobalVar.Empty)).replace(//s*$/,GlobalVar.Empty);
},
//设置文本框属性及添加事件
SetPropertyAndEvent:function(e) {
e.type = GlobalVar.Text_Property.Type[0];
e.size = GlobalVar.Text_Property.Size[0];
e.attachEvent(GlobalVar.Elmt_Event.OnKeyUp,function() { AutoPrompt.TextEvent.KeyUp(e); } );
e.attachEvent(GlobalVar.Elmt_Event.OnKeyDown,function() { AutoPrompt.TextEvent.KeyDown(e); } );
},
//按下键盘时处理函数
KeyDown:function(e) {
if(event.keyCode >= 37 && event.keyCode <= 40)
{
if($(GlobalVar.Div_Id).style.display !== GlobalVar.Div_Property_Value.display[1])
{
return ;
}
if(GlobalVar.Is_Flag_Temp_Text)
GlobalVar.Temp_Text = e.value;
var titles = $(GlobalVar.Div_Id).childNodes;
var index = 0;
if(event.keyCode === 38 || event.keyCode === 40)
{
for(var i = 0 ; i < titles.length ; i++)
{
if(event.keyCode === 38)
{
if(GlobalVar.Temp_Div === null)
{
index = titles.length - 1;
break;
}
else
{
if(GlobalVar.Temp_Div.id === titles[i].id)
{
if(i >= 0)
index = i - 1;
else
index = -1;
break;
}
}
}
if(event.keyCode === 40)
{
if(GlobalVar.Temp_Div === null)
{
index = 0;
break;
}
else
{
if(GlobalVar.Temp_Div.id === titles[i].id)
{
if(i < titles.length - 1)
{
index = i + 1;
}
else
{
index = -1;
}
break;
}
}
}
}
AutoPrompt.PromptDiv.ChangeDivColor($(GlobalVar.Title_Div_Id_Prefix+index),true);
}
}
else if(event.keyCode === 13)
{
if(GlobalVar.Temp_Div !== null && $(GlobalVar.Div_Id) !== null && $(GlobalVar.Div_Id).style.display === GlobalVar.Div_Property_Value.display[1])
{
e.value = GlobalVar.Temp_Div.childNodes[0].innerText;
$(GlobalVar.Div_Id).style.display = GlobalVar.Div_Property_Value.display[0];
GlobalVar.Temp_Div = null;
}
$(GlobalVar.Text_Id).focus();
event.returnValue = false;
}
else
{
$(GlobalVar.Div_Id).innerHTML = GlobalVar.Empty;
}
},
//按键弹起时处理函数
KeyUp:function(e) {
if(event.keyCode >= 37 && event.keyCode <= 40)
return;
if(event.keyCode === 13)
return;
var value = AutoPrompt.TextEvent.Trim(e.value);
if(value === '')
{
$(GlobalVar.Div_Id).style.display = GlobalVar.Div_Property_Value.display[0];
return ;
}
if(event.keyCode>=33 && event.keyCode <= 126)
{
beforeSetValue = true;
}
var index = 0;
for(var i =0 ; i < GlobalVar.Data.length ; i++)
{
if(GlobalVar.Data[i].title.toLowerCase().indexOf(value.toLowerCase()) === 0 || GlobalVar.Data[i].title.toUpperCase().indexOf(value.toUpperCase()) === 0)
{
var id = GlobalVar.Title_Div_Id_Prefix + index;
AutoPrompt.CreateTag($(GlobalVar.Div_Id), GlobalVar.Elmt_Type.div, id);
AutoPrompt.PromptDiv.SetProperty($(id),1);
$(id).style.paddingTop = GlobalVar.Title_Div_Title.PaddingTop;
$(id).style.paddingBottom = GlobalVar.Title_Div_Title.PaddingBottom;
$(id).style.cursor = GlobalVar.Div_Property_Value.cursor[0];
var title_id = GlobalVar.Title_Div_Title_Id_Prefix + index;
AutoPrompt.CreateTag($(id), GlobalVar.Elmt_Type.div, title_id);
$(title_id).style.display = GlobalVar.Div_Property_Value.display[2];
$(title_id).style.styleFloat = GlobalVar.Div_Property_Value.styleFloat[0];
$(title_id).title = GlobalVar.Data[i].title;
var count = AutoPrompt.TextEvent.GetBytesCount(GlobalVar.Data[i].title);
var innerText = GlobalVar.Data[i].title;
if(count > 40)
innerText = innerText.substr(0,20);
$(title_id).innerText = innerText;
$(title_id).style.cursor = GlobalVar.Div_Property_Value.cursor[0];
var count_id = GlobalVar.Title_Div_Count_Id_Prefix + index;
AutoPrompt.CreateTag($(id), GlobalVar.Elmt_Type.div, count_id);
$(count_id).style.display = GlobalVar.Div_Property_Value.display[2];
$(count_id).style.styleFloat = GlobalVar.Div_Property_Value.styleFloat[1];
$(count_id).style.cursor = GlobalVar.Div_Property_Value.cursor[0];
$(count_id).innerText = GlobalVar.Data[i].count;
$(id).onmouseover = function() {
GlobalVar.Is_Flag_Temp_Text = false;
AutoPrompt.PromptDiv.PromptDivEvent.MouseOver(this,false);
};
$(id).onclick = function() {
GlobalVar.Is_Flag_Temp_Text = false;
AutoPrompt.PromptDiv.PromptDivEvent.Click(this);
};
if(index > 9)
break;
index++;
}
}
if($(GlobalVar.Div_Id).childNodes.length > 0)
{
$(GlobalVar.Div_Id).style.display = GlobalVar.Div_Property_Value.display[1];
GlobalVar.Temp_Text = value;
GlobalVar.Div_Position = AutoPrompt.PromptDiv.GetPosition($(GlobalVar.Div_Id));
}
else
{
$(GlobalVar.Div_Id).style.display = GlobalVar.Div_Property_Value.display[0];
}
}
}
/****************** End AutoPrompt.TextEvent ******************/
}
/****************** End AutoPrompt ******************/
web页面（将以下红色文本复制到记事本里，重命名文件为“autoprompt.htm”，该文件保存在桌面上即可）：
全部显示
仅显示简体中文
仅显示繁体中文
各个文件的目录关系（后附图说明）：
.......
images (图片文件夹)
gs.gif (图片)
logo.jpg (图片)
jsfile (脚本文件夹)
auto_prompt.js (js脚本)
xmlfile (数据文件夹)
auto_prompt.xml (xml文件)
autoprompt.htm (html静态网页)
目录如下图所示：
gs.gif 和 logo.gif 图片均在我空间相册images里边。
查看效果步骤：
1、如上图所示，在桌面建立三个文件夹，取名为images、jsfile、xmlfile；
2、到我空间相册里面（具体地方我已在上面说明）复制gs.gif和logo.jpg粘贴到刚新建的images文件夹里面；
3、在该日记相应位置（已标注说明你该怎么操作）复制红色文本粘贴到记事本里面，然后改文件后缀
名（一共三个文件：auto_prompt.js 、auto_prompt.xml和autoprompt.htm），然后按照上图所示将
这些文件存放到相应文件夹；
4、如果你前面严格按我说的去做的话，那么现在可以双击autoprompt.html这个网页了；
5、现在你进入了一个类似于搜索引擎的页面了吗？如果是的话，请尝试输入"C"，不知道你有没有看到
什么效果，如果看到了，你还可以尝试输入其他的字符，如：“大江”、“雁”、“a”、“你”等等
都可以。
在这个过程中，如果你发现了什么错误的话可以告诉我，好让我继续完善。谢谢啦！