ホームページ ウェブフロントエンド jsチュートリアル js_javascriptスキルを使用して入力プロンプト(自動補完)を実装するサンプルコード

js_javascriptスキルを使用して入力プロンプト(自動補完)を実装するサンプルコード

May 16, 2016 pm 05:32 PM
js ヒント 入力

コードをコピー コードは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoComplete</title>
&lt ;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.autoComplete {margin: 8px;position:relative;float:left;}
.autoComplete input {width:200px;height:25px;margin:0;padding:0;line-height:25px;}
.autoComplete ul {z-インデックス:-12;パディング:0px;マージン:0px;ボーダー:1px #333 ソリッド;幅:200px;背景:白;表示:なし;位置:絶対;左:0;上:28px;*マージン左:9px ;*margin-top:2px;margin-top:1px;}
.autoComplete li {list-style:none;}
.autoComplete li a {display:block;color:#000;text-decoration: none;padding:1px 0 1px 5px;_width:97%;}
.autoComplete li a:hover {color:#000;background:#ccc;border:none;}
</style>
<script type="text/javascript">
//<![CDATA[
var getElementsByClassName = function (searchClass, node, tag) {/* 各浏览器の互換クラスのメソッド;(:http://www.jb51.net,想更多请看这个地址) */
ノード = ノード ||ドキュメント、タグ = タグ ? tag.toUpperCase() : "*";
if(document.getElementsByClassName){/* getElementsByClassName をサポートする浏览器 */
var temp = node.getElementsByClassName(searchClass);
if(tag== "*"){
return temp;
} else {
var ret = new Array();
for(var i=0; iもし(temp[i].nodeName==tag)
ret.push(temp[i]);
return ret;
}
}else{/* サポートされていない要素 ByClassName の浏览器 */
var class = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
pattern = [], returnElements = [], current, match;
var i =classes.length;
while(--i >= 0 )
pattern.push(new RegExp("(^|s)" class[i] "(s|$)"));
var j = elements.length;
while(--j >= 0){
current = elements[j], match = false;
for(var k=0, kl=patterns.length; k<kl; k ){
match = pattern[ k].test(current.className);
if(!match) Break;
}
if(match) returnElements.push(current);
}
return returnElements;
}
};
var addEvent=(function(){/* 用此関数数追加イベント防止イベント覆盖 */
if(document.addEventListener){
return function(type, fn) { this.addEventListener(type, fn, false); };
}else if(document.attachEvent){
return function(type,fn){
this.attachEvent(on type, function () {
return fn.call(this, window.event);/* 兼容IE */
});
};
}
})();
;(function(window){
/* プラグインの開始*/
var autoComplete=function(o){
var handler=(function(){
var handler =function(e,o){ return new handler.prototype.init(e,o); };/* 複数の dom を選択するときに簡単に使用できるように、選択した各 dom に対応するオブジェクトを作成します */
handler.prototype={
e:null, o:null, timer:null, show:0, input:null, Popup:null,
init:function(e,o){/ * を設定します初期オブジェクト*/
this.e=e, this.o=o,
this.input=this.e.getElementsByTagName(this.o.input)[0],
this.popup =this .e.getElementsByTagName(this.o.popup)[0],
this.initEvent();/* さまざまなイベントを初期化します*/
},
:match(quickExpr,value,source){/ * プロンプトの生成*/
var li = null;
null ){
li = document.createElement(li);
li.innerHTML = <a href="javascript:;"> source[i] </a>;
This.popup .appendChild(li);
This.popup.style.display=block;
else
this.popup.style.display=なし;
},
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Google Chrome でこのタブのコンテンツが共有されているというメッセージが表示された場合はどうすればよいですか? Google Chrome でこのタブのコンテンツが共有されているというメッセージが表示された場合はどうすればよいですか? Mar 13, 2024 pm 05:00 PM

Google Chrome でこのタブのコンテンツが共有されているというメッセージが表示された場合はどうすればよいですか?

Win11 入力エクスペリエンスの無効化ガイド Win11 入力エクスペリエンスの無効化ガイド Dec 27, 2023 am 11:07 AM

Win11 入力エクスペリエンスの無効化ガイド

Windows 入力でハングまたはメモリ使用量の増加が発生する [修正] Windows 入力でハングまたはメモリ使用量の増加が発生する [修正] Feb 19, 2024 pm 10:48 PM

Windows 入力でハングまたはメモリ使用量の増加が発生する [修正]

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます 株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする

PHP と JS を使用して株価ローソク足チャートを作成する方法 PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

PHP と JS を使用して株価ローソク足チャートを作成する方法

JSと百度地図を使って地図クリックイベント処理機能を実装する方法 JSと百度地図を使って地図クリックイベント処理機能を実装する方法 Nov 21, 2023 am 11:11 AM

JSと百度地図を使って地図クリックイベント処理機能を実装する方法

See all articles