用javascript实现输入框的输入推荐代码

最新推荐文章于 2022-12-24 11:27:42 发布

技术客

最新推荐文章于 2022-12-24 11:27:42 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript function xhtml html object 服务器

本文链接：https://blog.csdn.net/sunhaidong886/article/details/5743092

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己学习javascript之余，实现了输入框的智能提示功能，其代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>
<body>
<div id="content">
<p>Type in a color in lowercase:<br /></p>
<input type ="text" value ="" id ="textColor" onkeyup ="TextUtil.autoSuggest(this,arrColors,'lstColors');" /><br />
<p>nidddddddddddddddddddddddddddddd</p>
<select id="lstColors" size ="5" style ="width:200px; visibility:hidden; position :absolute ;" onclick ="setText(this,'textColor');">

</select>
</div>
    <script type ="text/javascript" >
        var arrColors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown", "black", "tan", "ivory", "navy", "aqua", "purple", "pink", "gray", "silver"];
        arrColors.sort();
        function setText(oListBox, otextColorId) {
            var textColor = document.getElementById(otextColorId);
            if (oListBox.selectedIndex > -1) {
                textColor.value = oListBox.options[oListBox.selectedIndex].text;
            }
            oListBox.style.visibility = "hidden";
        }
        var TextUtil = new Object;
        TextUtil.autoSuggestMatch = function(sText, arrayValues) {
            var arrayResult = new Array;
            if (sText != "") {
                for (var i = 0; i < arrayValues.length; i++) {
                    if (arrayValues[i].indexOf(sText) == 0) {
                        arrayResult.push(arrayValues[i]);
                    }
                }
            }
            return arrayResult;
        }
        TextUtil.autoSuggest = function(oTextBox, arrValues, sListboxId) {
            var listbox = document.getElementById(sListboxId);
            listbox.style.visibility = "visible";
            listbox.style.top = "70px";
            for (var i = listbox.options.length - 1; i >= 0; i--) {
                listbox.remove(i);
            }