Maison > Article > interface Web > JS implémente des invites intelligentes pour les zones de saisie

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

小云云original: 2018-03-22 16:56:242136parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève analyse de deux méthodes d'implémentation de replaceAll dans jsArticle suivant：Une brève analyse de deux méthodes d'implémentation de replaceAll dans js

Articles Liés

Voir plus