suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert intelligente Eingabeaufforderungen für Eingabefelder

JS implementiert intelligente Eingabeaufforderungen für Eingabefelder

小云云
小云云Original
2018-03-22 16:56:242197Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich JS mit, um intelligente Eingabeaufforderungen für Eingabefelder zu implementieren. Ich hoffe, dass er allen helfen kann. 

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

Verwandte Empfehlungen:

JS-Code zur Nachahmung der intelligenten prompt_javascript-Fähigkeiten des Baidu-Eingabefelds

Das obige ist der detaillierte Inhalt vonJS implementiert intelligente Eingabeaufforderungen für Eingabefelder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Analyse zweier Methoden zur Implementierung von replaceAll in jsNächster Artikel：Eine kurze Analyse zweier Methoden zur Implementierung von replaceAll in js

In Verbindung stehende Artikel

Mehr sehen