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

在這個範(fàn)例中，我們建立了一個輸入框，並使用onkeyup<\/code> 事件呼叫showHint()<\/code> 函數(shù)，同時在頁面上建立一個段落標(biāo)籤用於顯示自動提示的內(nèi)容。 <\/p>

1. 寫 JavaScript 程式碼<\/li><\/ol>

   接下來，我們需要在 JavaScript 中實作自動提示的功能?？梢允褂靡韵鲁淌酱a：<\/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>
   在這個範(fàn)例中，showHint()<\/code> 函數(shù)會在輸入框的內(nèi)容改變時觸發(fā)。它會取得輸入框的值，並呼叫 getHints()<\/code> 函數(shù)取得提示清單。然後，根據(jù)清單的長度決定是否顯示提示內(nèi)容。 <\/p>
   getHints()<\/code> 函數(shù)是一個簡單的範(fàn)例，它假設(shè)有一個靜態(tài)的提示列表，並根據(jù)輸入的內(nèi)容進(jìn)行篩選和匹配。在實際應(yīng)用中，可以根據(jù)需求從伺服器或本地資料取得提示列表，並使用更複雜的演算法進(jìn)行比對。 <\/p>
   新增樣式<\/li><\/ol>
   為了讓頁面更美觀，我們可以為輸入框和提示清單新增一些樣式。可以使用以下程式碼：<\/p>