javascript搜索自動提示功能的實現(xiàn)
更新時間:2008年06月04日 23:08:08 作者:
使用 jQuery(Ajax)/PHP/MySQL實現(xiàn)自動完成功我覺得我有必要寫這個教程,因為曾經(jīng)見到的大部分關(guān)于自動完成的應(yīng)用程序都只是給你一個程序源碼包,然后告訴你怎么使用,而不是告訴你它是如何工作的以及為什么這樣做。
主文件HTML:
<div>
<div>
Type your county (for the demo):
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />
</div> <div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</div>
這是主文件的部分html代碼,你需要添加的就是一個輸入框,并且把 ‘onkeyup' 函數(shù)設(shè)置為lookup(this.value)。另外,我建議你不要修改它的ID,如果你不想修改上面的Javascript代碼的話。
截圖:
我想你應(yīng)該會想要看看最后的效果是什么樣子,OK。
還有,
最后就是有用的鏈接了,我想你應(yīng)該期待很久了。
打包文件
您可能感興趣的文章:
- JavaScript正則方法replace實現(xiàn)搜索關(guān)鍵字高亮顯示
- JavaScript實現(xiàn)的搜索及高亮顯示功能示例
- Angularjs實現(xiàn)搜索關(guān)鍵字高亮顯示效果
- 用JS將搜索的關(guān)鍵字高亮顯示實現(xiàn)代碼
- JS仿百度搜索自動提示框匹配查詢功能
- js實現(xiàn)搜索框關(guān)鍵字智能匹配代碼
- JS實現(xiàn)表格數(shù)據(jù)各種搜索功能的方法
- 可以用來搜索當(dāng)前頁面內(nèi)容的js代碼
- javascript 關(guān)鍵字高亮顯示實現(xiàn)代碼
- JS實現(xiàn)靜態(tài)頁面搜索并高亮顯示功能完整示例
相關(guān)文章
Vue3基于countUp.js實現(xiàn)數(shù)字滾動的插件
本文主要介紹了Vue3基于countUp.js實現(xiàn)數(shù)字滾動的插件,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04JS實現(xiàn)統(tǒng)計字符串中字符出現(xiàn)個數(shù)及最大個數(shù)功能示例
這篇文章主要介紹了JS實現(xiàn)統(tǒng)計字符串中字符出現(xiàn)個數(shù)及最大個數(shù)功能,結(jié)合實例形式分析了javascript字符串遍歷、統(tǒng)計相關(guān)操作技巧,需要的朋友可以參考下2018-06-06textarea不能通過maxlength屬性來限制字數(shù)的解決方法
textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字數(shù),為此必須尋求其他方法來加以限制以達到預(yù)設(shè)的需求2014-09-09