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

In this example, we create an input box and use the onkeyup<\/code> event to call the showHint()<\/code> function while on the page Create a paragraph tag to display auto-suggested content. <\/p>

1. Writing JavaScript code<\/li><\/ol>

   Next, we need to implement the automatic prompt function in JavaScript. You can use the following code: <\/p>

   function showHint() {\n    var input = document.getElementById(\"myInput\").value;\n    var hint = document.getElementById(\"hint\");\n\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)容進行篩選和匹配\n\n    \/\/ 假設(shè)這里是一個靜態(tài)的提示列表\n    var hints = [\"apple\", \"banana\", \"cherry\", \"date\", \"elderberry\", \"fig\", \"grape\"];\n\n    \/\/ 根據(jù)輸入的內(nèi)容進行篩選和匹配\n    hints = hints.filter(function(item) {\n        return item.toLowerCase().indexOf(input.toLowerCase()) > -1;\n    });\n\n    return hints;\n}<\/pre>
   In this example, the showHint()<\/code> function will be triggered when the content of the input box changes. It will get the value of the input box and call the getHints()<\/code> function to get the list of hints. Then, decide whether to display the prompt content based on the length of the list. <\/p>
   getHints()<\/code> The function is a simple example that assumes a static list of hints and filters and matches based on the input content. In practical applications, the prompt list can be obtained from the server or local data according to needs, and more complex algorithms can be used for matching. <\/p>
   Add styles<\/li><\/ol>
   In order to make the page more beautiful, we can add some styles to the input box and prompt list. You can use the following code: <\/p>
   <bdo id="bm9wg"></bdo>