input+select输入汉字或拼音快速选择数据第1步 - DHTML

<!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;
    }
}

//点击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;

//默认按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;
    }
}