自己做的基于XML数据的JS(json格式)智能提示

俺花了不少精力才把智能提示做到这样,不知道里面有没有缺陷,希望大家来帮我寻找Bug。

 

数据文件(将以下红色文本复制到记事本里,重命名文件为“auto_prompt.xml”,并保存到桌面的“xmlfile”文件夹):



 
    Working with the Active Cell
    563
 

 
    Customizing the Colors of a Cell
    654
 

 
    Aligning Cell Contents
    254
 

 
    Customizing Cell Borders
    876
 

 
    Customizing the Margins and Spacing of the Cell
    567
 

 
    Creating and Applying a Custom Style for Cells
    875
 

 
    Assigning a Cascading Style Sheet to a Cell
    1324
 

 
    Creating a Range of Cells
    674
 

 
    I am Michael Jordan
    2343
 

 
    Welcome to China
    435
 

 
    One World, One Dream
    542
 

 
    Distance makes the hearts grow fonder
    121
 

 
    Don't cry because it is over, smile because it happened
    232
 

 
    I never consider ease and joyfulness as the purpose of life itself
    12
 

 
    Better to light one candle than to curse the darkness
    547
 

 
    Love makes man grow up or sink down
    422
 

 
    神即道 道法自然 如来
    123
 

 
    <br>      大江东去,浪淘尽,千古风流人物。故垒西边,人道是,三国周郎赤壁。乱石穿空,惊涛拍岸,卷起千堆雪。江山如画,一时多少豪杰。<br>      遥想公瑾当年,小乔初嫁了,雄姿英发。羽扇纶巾,谈笑间,樯橹灰飞烟灭。故国神游,多情应笑我,早生华发。人生如梦,一樽还酹江月。<br>   
    676
 

 
    不会下厨的裁缝一定不是一个好司机
    121
 

 
    物竞天择,适者生存
    15
 

 
    对酒当歌,人生几何
    12
 

 
    不患寡而患不均,不患贫而患不安
    433
 

 
    你的诞生带给我希望,而我希望带给你幸福
    32
 

 
    当生则生 当死则死
    54
 

 
    一夫当关 万夫莫开
    434
 

 

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”,该文件保存在桌面上即可):




    Auto Prompt Page

   

   

   


   


   

       
   

   

       

            网页 图片                 href="#">视频 地图 问答 资讯 音乐 来吧 购物                 href="#">更多>>
       

   

   

        全部显示
        仅显示简体中文
        仅显示繁体中文
   

   

       
       
   

   
   

        设置zhouych搜索语言:简体中文             href="#" style="font-size: 12px; color: blue;">繁体中文 English 其他>> 
   

   
   

        ?2010 zhouych 使用zhouych前必读 唐ABCD证8888168号
       

       
   

   

   


 

 

 

各个文件的目录关系(后附图说明):

.......

        images                 (图片文件夹)

               gs.gif              (图片)

               logo.jpg        (图片)

        jsfile            (脚本文件夹)

               auto_prompt.js     (js脚本)

        xmlfile           (数据文件夹)

               auto_prompt.xml     (xml文件)

        autoprompt.htm        (html静态网页)

 

目录如下图所示:
自己做的基于XML数据的JS(json格式)智能提示_第1张图片

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”、“你”等等

     都可以。

在这个过程中,如果你发现了什么错误的话可以告诉我,好让我继续完善。谢谢啦!

你可能感兴趣的:(程序开发,xml,json,function,div,null,button)