首页蓝耳朵|小小蓝耳朵广州图书馆外文室英语儿童读物资源介绍网佛教青年之友旧版收集永硕E盘Phonics Short Vowels Game 
input+select输入汉字或拼音快速选择数据第1步
所属栏目:DHTML  时间:2010-11-25 14:33  作者:狼子

第1步:http://www.nnllok.cn/Read.aspx?id=466

第2步:http://www.nnllok.cn/Read.aspx?id=467

again:http://www.nnllok.cn/Read.aspx?id=468

第3步:http://www.nnllok.cn/Read.aspx?id=469

第4步:http://www.nnllok.cn/Read.aspx?id=470

------------------------------------------------------

工作完成第一步,先记录

后续工作:

1.把option改成从数组中读取,按录入的数据显示不同的option

2.从数据库中读取数据到数组,300多个字符串和他们的拼音,这个数组不大的

3.要做到可以一个页面调用多个这样子的控件,所以要把脚本封装到类里,不可以像现在这样子的。。。

4.改成用户控件

我不想每一次文本有修改,就去读取一次数据库,AutoComplete里是这样子的吗?我还没研究过。。。

记下网址,写完自己的再慢慢研究:http://www.open-open.com/ajax/AutoComplete.htm

下面是第一步结束的代码:ie8内核maxthon 2.5.15、chrome 7.0.517.43下测试通过

页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>利用select快速选择录入数据</title>
</head>
<body>
<form id="form1" action="">
    <div style="padding-top:32px;">
        <input type="text" id="wordInput" style="width:700px;" autocomplete="off" /><br />
        <select id="wordSelect" style="width:120px; display:none;" multiple="multiple">
            <option value="1">1111</option>
            <option value="2">2222</option>
            <option value="3">3333</option>
            <option value="4">4444</option>
            <option value="5">5555</option>
            <option value="中国人">中国人</option>
            <option value="中国">中国</option>
            <option value="中国人民万岁">中国人民万岁</option>
        </select>       
    </div>
   
    <script type="text/javascript">
        var wordInputObj = document.getElementById("wordInput");
        var wordSelectObj = document.getElementById("wordSelect");
        var wordCount = wordSelectObj.options.length;
    </script>
    <script type="text/javascript" src="phonics.js"></script>
</form>
</body>
</html>

脚本phonics.js

//定义全局变量,记录整个页面当前有焦点的可录入控件的id,这个值用于隐藏select时的判断
var activeObjId = "", lastActiveObjId = "";

//利用activeObjId,控制select的显示和隐藏
function ShowHideSelect()
{
    var myForm = document.forms[0];
    var objType = ",text,select-one,select-multiple,checkbox,radio,file,";
   
    for(var i = 0; i < myForm.length; i++)
    {       
        if(objType.indexOf(myForm.elements[i].type) != -1)
        {
            switch(myForm.elements[i].id)
            {
                case wordInputObj.id:
                    //input控件
                    //输入数据时根据当前数据重新设置新的选项、如果选项不变
                    //myForm.elements[i].onkeypress = function() { SelectFirstOption(); }
                    myForm.elements[i].onkeyup = function() { SelectFirstOption(); }
                    //控制上下箭头、回车
                    myForm.elements[i].onkeydown = function() { ChangeOption(); }
                   
                    //给input添加onclick显示select,防止用户用箭头和回车选择一项后,重新点击鼠标要显示select再次选择
                    myForm.elements[i].onclick = function()
                    {
                        if(wordSelectObj.style.display == "none") wordSelectObj.style.display = "block";
                    };
                    break;
                case wordSelectObj.id:
                    //select控件
                    myForm.elements[i].onclick = function() { SetInputValue(); }
                    break;
                default:
                    //其它控件
                    myForm.elements[i].onfocus = function()
                    {
                        lastActiveObjId = activeObjId;
                        activeObjId = this.id;
                    }
                    break;
            }
           
            //input和select一样的事件
            if(myForm.elements[i].id == wordInputObj.id || myForm.elements[i].id == wordSelectObj.id)
            {
                myForm.elements[i].onfocus = function()
                {
                    lastActiveObjId = activeObjId;
                    activeObjId = this.id;
                    if(wordSelectObj.style.display == "none") wordSelectObj.style.display = "block";
                };
               
                myForm.elements[i].onblur = function()
                {                   
                    if(lastActiveObjId == wordInputObj.id && activeObjId == wordSelectObj.id)
                    {
                        //焦点从input转到select,显示
                        if(wordSelectObj.style.display == "none") wordSelectObj.style.display = "block";
                        wordSelectObj.focus();
                    }
                    else
                    {
                        if(wordSelectObj.style.display == "block") wordSelectObj.style.display = "none";
                    }
                }
            }
        }
    }
}
//给表单添加onsubmit事件,控制如果是用户在select里按回车引起的提交,则中断提交
function StopSubmit()
{
    document.forms[0].onsubmit = function()
    {
        if(activeObjId == wordInputObj.id || activeObjId == wordSelectObj.id) return false;
    }
}

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if(typeof window.onload != 'function') { window.onload = func; }
    else { window.onload = function() { oldonload(); func(); } }
}
addLoadEvent(ShowHideSelect);
addLoadEvent(StopSubmit);


//点击select选择一项时,设置这一项的值到input
function SetInputValue()
{
    wordInputObj.value = wordSelectObj.options[wordSelectObj.selectedIndex].text;
    wordSelectObj.style.display = "none";
}

//如果在input里按了上箭头,select选上一项;按了下箭头则选下一项,按了回车则选中项
function ChangeOption()
{
    //获取录入的键盘值:上箭头38、下箭头40、回车13
    if(window.event) e = window.event;
    var nowKeyCode = e.charCode || e.keyCode || e.which;
   
    if(nowKeyCode != 38 && nowKeyCode != 40 && nowKeyCode != 13) return;

    var activeIndex = wordSelectObj.selectedIndex;
    if(nowKeyCode == 13)
    {
        //回车
        SetInputValue();
        return false;
    }
    else if(nowKeyCode == 38)
    {
        //上箭头,如果当前项是第一项,选择最后一项
        if(activeIndex == 0) activeIndex = wordCount;
        activeIndex = activeIndex - 1;
    }
    else
    {
        //下箭头,如果当前项是最后一项,选择第一项
        if(activeIndex == wordCount - 1) activeIndex = -1;
        activeIndex = activeIndex + 1;
    }
   
    //设置选项
    wordSelectObj.selectedIndex = activeIndex;
}

//默认按input里录入的数据,选中select中开头相同的第一个
function SelectFirstOption()
{
    //获取录入的键盘值:上箭头38、下箭头40、回车13
    if(window.event) e = window.event;
    var nowKeyCode = e.charCode || e.keyCode || e.which;
   
    if(nowKeyCode == 38 || nowKeyCode == 40) return;
   
    var firstIndex = -1;
    var nowText, inputText;
   
    //当前录入值
    inputText = wordInputObj.value;
   
    //循环检查每一项,获取第一个开头吻合的选项
    for (var i = 0; i < wordCount; i++)
    {
        nowText = wordSelectObj.options[i].text;
        if(nowText.indexOf(inputText) == 0)
        {
            firstIndex = i;
            break;
        }
    }
   
    //设置第一个开头吻合的选项为选中项
    if(firstIndex > -1)
    {
        wordSelectObj.selectedIndex = firstIndex;
    }
}

备份完成,开始继续动脚本。。。

小楼宝宝的涂鸦花花(Imitater)的博客起名称骨测字