JS implémente des invites intelligentes pour les zones de saisie-js tutoriel-php.cn

JS implémente des invites intelligentes pour les zones de saisie

小云云

Libérer： 2018-03-22 16:56:24

original

2145 Les gens l'ont consulté

Cet article partage principalement avec vous du JS pour implémenter des invites intelligentes pour les zones de saisie. Il est principalement partagé avec vous sous forme de code.

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

Copier après la connexion

Recommandations associées :

Code JS pour imiter la boîte de saisie Baidu, compétences intelligentes prompt_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!