カスタム検索ボックス、プロンプトの情報を検索ボックス

まず、ソース

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 

<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
    <スタイル> 
        #txt { 
            幅：350px; 
        } 

        のdiv P { 
            マージン：0。
            パディング：0; 
            パディング左：5pxの; 
            パディングトップ：5pxの; 
        } 
    </スタイル> 
</ HEAD> 

<BODY> 
    の<divのid = "箱">
 
    <スクリプトSRC = "./ JSは/ common.js"> </ SCRIPT> 
    <SCRIPT> 
        のvarキーワード= [ "りんご"、「バナナを「」梨「」キングメロン「」ドラゴンフルーツ「」スイカ「」マンゴー「」ネクタリン「」メロン「」赤ぶどう「」Jufeng、 『』醜いオレンジ「」聖女性の果実""梨""メロン""桃""油"]; 
        VAR tempArr = []; //一時配列
        。私の$（" TXT「）onkeyupの=関数（）{ 
            VAR =テキストthis.value; 

            //ドロップダウンボックスがあるかどうかを判断し、削除されたが、そこにある
            （私の$（ "DV"））{IF 
                マイ$（ "ボックス"）のremoveChild（マイ$（ "DV"））;
            他{} 
                //何もしない
            } 

            //一時的アレイの初期化、アレイ処理テンポラリデータ
            tempArr = []; 
            のため（LET I = 0;私は<keywords.length; Iは++）{
                IF {（（0 ==キーワード[I] .indexOf（テキスト））&&（text.length = 0）！）
                    tempArr.push（キーワード[I]）; 
                }他{ 
                    //何もしない
                } 
            } 

            //テキストボックスには、一時的な配列は、div要素を作成することなく、空で、空である
            IF（this.value.length == 0 || tempArr.length == 0）{ 
                //ページが、このdiv要素を持っている場合、div要素を削除
                IF（マイ$ （ "DV"））{ 
                    私の$（ "ボックス"）のremoveChild（マイ$（ "DV"））; 
                } 
                リターン; 
            } 

            // div要素を作成し、DIVのID = "箱"のタグに追加された
            VAR dvObj = document.createElement（ "DIV"）;
            $私の（ "ボックス"）のappendChild（dvObj）;. 
            dvObj.id = "DV"; 
            dvObj.style.width = "350px"; 
            dvObj.style.border = "1pxのソリッド・グリーン"; 

            //反復tempArr配列は、作成しますdvObjに添加されるP、
            {（; IはtempArr.lengthを<I ++はI = 0 LET）のための
                VAR POBJ =のdocument.createElement（ "P"）; 
                // pObj.innerHTML = tempArr [I]; 
                Pにおける//タグ内部的に追加したテキストリテラル
                setInnerText（POBJ、tempArr [I]）; 
                dvObj.appendChild（POBJ）; 

                //マウスが入力マウスイベントに登録するには、黄色の背景を添加
                pObj.onmouseover =関数（）{ 
                    this.style.backgroundColor = " 「黄色;
                }。

                //マウスの削除イベントを登録し、マウスが削除され、背景色が削除された 
                pObj.onmouseout =関数（）{
                    this.style.backgroundColor = ""; 
                }; 
            } 
        } 
    </ SCRIPT> 
</ BODY> 

</ HTML>

二、common.js

/ *要素オブジェクトID * /ゲット
マイ$関数（ID）{ 
    のdocument.getElementById（ID）を返す; 
} 

/ ** 
 *任意の中間要素のテキストの内容を設定します
 * @param {*}要素タグ要素
 * @param {* }テキストテキスト
 * / 
関数setInnerText（要素、テキスト）{ 
    （typeof演算element.textContent === "未定義"）{IF 
        element.innerText =テキスト; 
    }そうでなければ{ 
        element.textContent =テキスト; 
    }    
}

第三に、レンダリング

初期図：

検索を入力します。

ホバー：

検索性の向上：

検索の内容を空にします：

カスタム検索ボックス、プロンプトの情報を検索ボックス

おすすめ