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>
< ;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
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 までご連絡ください。

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック
Gmailメールのログイン入り口はどこですか?
7281
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1341
46


Laravel チュートリアル
1258
25


PHP チュートリアル
1205
29



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

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

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