<\/p>\n<\/body>\n<\/html><\/pre>

この例では、入力ボックスを作成し、onkeyup<\/code> イベントを使用して、実行中に showHint()<\/code> 関數(shù)を呼び出します。ページ 自動提案コンテンツを表示する段落タグを作成します。 <\/p>

1. JavaScript コードの記述<\/li><\/ol>

   次に、JavaScript で自動プロンプト機(jī)能を?qū)g裝する必要があります。次のコードを使用できます。 <\/p>

   function showHint() {\n    var input = document.getElementById(\"myInput\").value;\n    var hint = document.getElementById(\"hint\");\n\n    \/\/ 在這里進(jìn)行數(shù)據(jù)查詢，獲取提示列表\n    var hints = getHints(input);\n\n    if (hints.length > 0) {\n        hint.innerHTML = hints.join(\", \"); \/\/ 將提示內(nèi)容拼接為字符串，并顯示在頁面上\n    } else {\n        hint.innerHTML = \"\"; \/\/ 如果沒有提示內(nèi)容，則清空提示\n    }\n}\n\nfunction getHints(input) {\n    \/\/ 這里可以根據(jù)實際需求，從服務(wù)器或本地數(shù)據(jù)獲取提示列表\n    \/\/ 并根據(jù)輸入的內(nèi)容進(jìn)行篩選和匹配\n\n    \/\/ 假設(shè)這里是一個靜態(tài)的提示列表\n    var hints = [\"apple\", \"banana\", \"cherry\", \"date\", \"elderberry\", \"fig\", \"grape\"];\n\n    \/\/ 根據(jù)輸入的內(nèi)容進(jìn)行篩選和匹配\n    hints = hints.filter(function(item) {\n        return item.toLowerCase().indexOf(input.toLowerCase()) > -1;\n    });\n\n    return hints;\n}<\/pre>
    この例では、入力ボックスの內(nèi)容が変更されたときに showHint()<\/code> 関數(shù)がトリガーされます。入力ボックスの値を取得し、getHints()<\/code> 関數(shù)を呼び出してヒントのリストを取得します。次に、リストの長さに基づいてプロンプトの內(nèi)容を表示するかどうかを決定します。 <\/p>
   getHints()<\/code> この関數(shù)は、ヒントとフィルターの靜的なリストを想定し、入力コンテンツに基づいて一致する簡単な例です。実際のアプリケーションでは、必要に応じてプロンプト リストをサーバーまたはローカル データから取得でき、より複雑なアルゴリズムを照合に使用できます。 <\/p>
   スタイルの追加<\/li><\/ol>
   ページをより美しくするために、入力ボックスとプロンプト リストにいくつかのスタイルを追加できます。次のコードを使用できます。 <\/p>