簡介：自動提示無非就是輸入框內(nèi)容改變時，自動根據(jù)輸入的內(nèi)容進(jìn)行模糊查詢；

手動實現(xiàn)無非兩種方式，一種異步加載數(shù)據(jù)，根據(jù)獲取的內(nèi)容異步加載到網(wǎng)頁相應(yīng)位置，第二種同步獲取數(shù)據(jù)，然后異步根據(jù)輸入框的改變進(jìn)行查詢；

異步由于得到的就是json很好處理，今天經(jīng)過摸索倒是想到了另一種方法，有點奇葩，寫出來與大家分享，歡迎大家指點；

思路：采用第二種方法，同步獲取數(shù)據(jù)，用c標(biāo)簽實現(xiàn)遍歷，然后進(jìn)行判斷顯示；

相關(guān)js代碼：

function autoHintW(){$("#processList0").empty();var p="", q="", value="";q+="<c:if test='${users!=null }'>";q+=" <c:forEach items='${users }' var='vr'>";p = "";p+=" <li>";value = '${vr.USER_ID}_${vr.NAME }';p+=" <input type='radio' name='users' value="+value+">";p+=" <input type='checkbox' name='cusers' value='"+value+"'>";p+=" <label class='abc'>${vr.NAME }</label>";p+=" </li>";var xx = $("#tab0 input[type=text]").val();if(xx == "" || value.indexOf(xx) >= 0){$("#processList0").append(p);}q+=" </c:forEach>";q+="</c:if>";load(); }

相關(guān)網(wǎng)頁代碼：

<div id="tab0"><input type="text" style="margin-top: 10px;"/><ul id="processList0"><script>autoHintW();</script></ul> </div>

當(dāng)然智能提示存在鼠標(biāo)鍵盤事件，本來想用onchange的但是鼠標(biāo)必須移開輸入框才會觸發(fā)，所以考慮用keyup，但是觸發(fā)太過頻繁，需要設(shè)置時間響應(yīng)：

$("#tab0 input[type=text]").keyup(function(){setTimeout("autoHintW()",1000); }); $("#tab1 input[type=text]").keyup(function(){setTimeout("autoHintD()",1000); }); $("#tab2 input[type=text]").keyup(function(){setTimeout("autoHintR()",1000); });

?

?歡迎大家訪問我的博客：http://www.cnblogs.com/handsomecui/p/7235806.html

總結(jié)

以上是生活随笔為你收集整理的智能提示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。