JS は入力ボックスのスマートプロンプトを実装します-jsチュートリアル-php.cn

JS は入力ボックスのスマートプロンプトを実装します

小云云

リリース： 2018-03-22 16:56:24

オリジナル

2159 人が閲覧しました

この記事は、主に入力ボックスのインテリジェントなプロンプトを実装するための JS をコードの形式で共有します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script>
        var keyWords = {
            "传智播客": ["传智播客java视频", "传智播客.net视频", "传智播客php视频"],
            "杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"],
            "杨": ["杨利伟", "杨振宇", "杨过"],
            "杨忠": ["杨忠科", "杨忠学", "杨忠爱国"]
        };
        setInterval(function () {
            document.getElementById(&#39;txt&#39;).onchange();
        }, 500);
        onload = function () {
            document.getElementById(&#39;txt&#39;).onchange = function () {
                if (document.getElementById(&#39;dv&#39;)) {
                    document.body.removeChild(document.getElementById(&#39;dv&#39;));
                }
                if (keyWords[this.value]){
                    var dvObj = document.createElement(&#39;p&#39;);
                    dvObj.id = &#39;dv&#39;;
                    dvObj.style.width = &#39;300px&#39;;
                    dvObj.style.height = &#39;200px&#39;;
                    dvObj.style.border = &#39;1px solid green&#39;;
                    dvObj.style.position = &#39;absolute&#39;;
                    dvObj.style.left = this.offsetLeft + &#39;px&#39;;
                    dvObj.style.top = this.offsetTop + this.offsetHeight + &#39;px&#39;;


                    ulObj = document.createElement(&#39;ul&#39;);
                    ulObj.style.listStyleType = &#39;none&#39;;
                    ulObj.style.margin = &#39;0&#39;;
                    ulObj.style.padding = &#39;0&#39;;
                    for (var i = 0; i < keyWords[this.value].length; i++) {
                        //创建Li
                        var liObj = document.createElement(&#39;li&#39;);
                        liObj.innerText = keyWords[this.value][i]; //显示每一项内容
                        liObj.style.marginTop = &#39;8px&#39;;
                        liObj.style.cursor = &#39;pointer&#39;;
                        //高亮显示
                        liObj.onmouseover = function () {
                            this.style.backgroundColor = &#39;yellow&#39;;
                        };
                        liObj.onmouseout = function () {
                            this.style.backgroundColor = &#39;&#39;;
                        };
                        //添加到ul中
                        ulObj.appendChild(liObj);
                    }
                    //ulobj添加到层中
                    dvObj.appendChild(ulObj);
                    //层添加到body中
                    document.body.appendChild(dvObj);


                }
            }
        }
    </script>
</head>
<body>
    <input type="text"  id="txt"/>
    <input type="button" value="百度一下" />
</body>
</html>

ログイン後にコピー

JS は入力ボックスのスマート プロンプトを実装します

JS は入力ボックスのスマートプロンプトを実装します