sensible215 2010-03-19 10:16
浏览 216
已采纳

请教一个jsp+js的前台技术问题。

这段时间做一个项目，是基于web2.0的，前台是jsp+css+js,后头用的struts2+hibernate+spring框架，我想实现一个功能 
  
<!--StartFragment -->

 

当我输入任何字符的时候，@后面的就在下面帮你显示出来，然后选择就行了。如何实现这个功能

  • 写回答

9条回答 默认 最新

  • myicer 2010-03-19 18:16
    关注

    功能我空间里有，可以去看，有格式代码，[url]http://iLinux.iteye.com/blog/620044[/url]

    代码也给你拷过来：
    1.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    2.

    3.



    4.Ajax Auto Complete

    5.<br><br> 6..mouseOut {<br><br> 7. background: #708090;<br><br> 8. color: #FFFAFA;<br><br> 9.}<br><br> 10.<br><br> 11..mouseOver {<br><br> 12. background: #FFFAFA;<br><br> 13. color: #000000;<br><br> 14.}<br><br> 15.

    16.

    17.<br><br> 18.<br><br> 19. var xmlHttp;<br><br> 20.<br><br> 21. var completeDiv;<br><br> 22.<br><br> 23. var inputField;<br><br> 24.<br><br> 25. var nameTable;<br><br> 26.<br><br> 27. var nameTableBody;<br><br> 28.<br><br> 29.<br><br> 30.<br><br> 31. function createXMLHttpRequest() {<br><br> 32.<br><br> 33. if (window.ActiveXObject) {<br><br> 34.<br><br> 35. xmlHttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);<br><br> 36.<br><br> 37. }<br><br> 38.<br><br> 39. else if (window.XMLHttpRequest) {<br><br> 40.<br><br> 41. xmlHttp = new XMLHttpRequest();<br><br> 42.<br><br> 43. }<br><br> 44.<br><br> 45. }<br><br> 46.<br><br> 47.<br><br> 48.<br><br> 49. function initVars() {<br><br> 50.<br><br> 51. inputField = document.getElementById(&quot;names&quot;);<br><br> 52.<br><br> 53. nameTable = document.getElementById(&quot;name_table&quot;);<br><br> 54.<br><br> 55. completeDiv = document.getElementById(&quot;popup&quot;);<br><br> 56.<br><br> 57. nameTableBody = document.getElementById(&quot;name_table_body&quot;);<br><br> 58.<br><br> 59. }<br><br> 60.<br><br> 61.<br><br> 62.<br><br> 63. function findNames() {<br><br> 64. initVars();<br><br> 65.<br><br> 66. var mails = [&quot;@163.com&quot;,&quot;@sina.com&quot;,&quot;@gmail.com&quot;];<br><br> 67. if (inputField.value.length &gt; 0) {<br><br> 68. clearNames();<br><br> 69.<br><br> 70. var size = mails.length;<br><br> 71.<br><br> 72. setOffsets();<br><br> 73. var row, cell, txtNode;<br><br> 74. var dizhi = inputField.value;<br><br> 75.<br><br> 76. for (var i = 0; i &lt; size; i++) {<br><br> 77. var nextNode = dizhi + mails[i];<br><br> 78.<br><br> 79. row = document.createElement(&quot;tr&quot;);<br><br> 80.<br><br> 81. cell = document.createElement(&quot;td&quot;);<br><br> 82.<br><br> 83.<br><br> 84.<br><br> 85. cell.onmouseout = function() {this.className=&#39;mouseOver&#39;;};<br><br> 86.<br><br> 87. cell.onmouseover = function() {this.className=&#39;mouseOut&#39;;};<br><br> 88.<br><br> 89. cell.setAttribute(&quot;bgcolor&quot;, &quot;#FFFAFA&quot;);<br><br> 90.<br><br> 91. cell.setAttribute(&quot;border&quot;, &quot;0&quot;);<br><br> 92.<br><br> 93. cell.onclick = function() { populateName(this); } ;<br><br> 94.<br><br> 95.<br><br> 96.<br><br> 97. txtNode = document.createTextNode(nextNode);<br><br> 98.<br><br> 99. cell.appendChild(txtNode);<br><br> 100.<br><br> 101. row.appendChild(cell);<br><br> 102.<br><br> 103. nameTableBody.appendChild(row);<br><br> 104.<br><br> 105. }<br><br> 106. return;<br><br> 107. }<br><br> 108.<br><br> 109.<br><br> 110.<br><br> 111. if (inputField.value.length &gt; 0) {<br><br> 112.<br><br> 113. createXMLHttpRequest();<br><br> 114.<br><br> 115. var url = &quot;AutoCompleteServlet?names=&quot; + escape(inputField.value);<br><br> 116.<br><br> 117. xmlHttp.open(&quot;GET&quot;, url, true);<br><br> 118.<br><br> 119. xmlHttp.onreadystatechange = callback;<br><br> 120.<br><br> 121. xmlHttp.send(null);<br><br> 122.<br><br> 123. } else {<br><br> 124.<br><br> 125. clearNames();<br><br> 126.<br><br> 127. }<br><br> 128.<br><br> 129. }<br><br> 130.<br><br> 131.<br><br> 132.<br><br> 133. function callback() {<br><br> 134.<br><br> 135. if (xmlHttp.readyState == 4) {<br><br> 136.<br><br> 137. if (xmlHttp.status == 200) {<br><br> 138.<br><br> 139. var name =<br><br> 140.<br><br> 141. xmlHttp.responseXML<br><br> 142.<br><br> 143. .getElementsByTagName(&quot;name&quot;)[0].firstChild.data;<br><br> 144.<br><br> 145. setNames(xmlHttp.responseXML.getElementsByTagName(&quot;name&quot;));<br><br> 146.<br><br> 147. } else if (xmlHttp.status == 204){<br><br> 148.<br><br> 149. clearNames();<br><br> 150.<br><br> 151. }<br><br> 152.<br><br> 153. }<br><br> 154.<br><br> 155. }<br><br> 156.<br><br> 157.<br><br> 158.<br><br> 159. function setNames(the_names) {<br><br> 160.<br><br> 161. clearNames();<br><br> 162.<br><br> 163. var size = the_names.length;<br><br> 164.<br><br> 165. setOffsets();<br><br> 166.<br><br> 167.<br><br> 168.<br><br> 169. var row, cell, txtNode;<br><br> 170.<br><br> 171. for (var i = 0; i &lt; size; i++) {<br><br> 172.<br><br> 173. var nextNode = the_names[i].firstChild.data;<br><br> 174.<br><br> 175. row = document.createElement(&quot;tr&quot;);<br><br> 176.<br><br> 177. cell = document.createElement(&quot;td&quot;);<br><br> 178.<br><br> 179.<br><br> 180.<br><br> 181. cell.onmouseout = function() {this.className=&#39;mouseOver&#39;;};<br><br> 182.<br><br> 183. cell.onmouseover = function() {this.className=&#39;mouseOut&#39;;};<br><br> 184.<br><br> 185. cell.setAttribute(&quot;bgcolor&quot;, &quot;#FFFAFA&quot;);<br><br> 186.<br><br> 187. cell.setAttribute(&quot;border&quot;, &quot;0&quot;);<br><br> 188.<br><br> 189. cell.onclick = function() { populateName(this); } ;<br><br> 190.<br><br> 191.<br><br> 192.<br><br> 193. txtNode = document.createTextNode(nextNode);<br><br> 194.<br><br> 195. cell.appendChild(txtNode);<br><br> 196.<br><br> 197. row.appendChild(cell);<br><br> 198.<br><br> 199. nameTableBody.appendChild(row);<br><br> 200.<br><br> 201. }<br><br> 202.<br><br> 203. }<br><br> 204.<br><br> 205.<br><br> 206.<br><br> 207. function setOffsets() {<br><br> 208.<br><br> 209. var end = inputField.offsetWidth;<br><br> 210.<br><br> 211. var left = calculateOffsetLeft(inputField);<br><br> 212.<br><br> 213. var top = calculateOffsetTop(inputField) + inputField.offsetHeight;<br><br> 214.<br><br> 215.<br><br> 216.<br><br> 217. completeDiv.style.border = &quot;black 1px solid&quot;;<br><br> 218.<br><br> 219. completeDiv.style.left = left + &quot;px&quot;;<br><br> 220.<br><br> 221. completeDiv.style.top = top + &quot;px&quot;;<br><br> 222.<br><br> 223. nameTable.style.width = end + &quot;px&quot;;<br><br> 224.<br><br> 225. }<br><br> 226.<br><br> 227.<br><br> 228.<br><br> 229. function calculateOffsetLeft(field) {<br><br> 230.<br><br> 231. return calculateOffset(field, &quot;offsetLeft&quot;);<br><br> 232.<br><br> 233. }<br><br> 234.<br><br> 235.<br><br> 236.<br><br> 237. function calculateOffsetTop(field) {<br><br> 238.<br><br> 239. return calculateOffset(field, &quot;offsetTop&quot;);<br><br> 240.<br><br> 241. }<br><br> 242.<br><br> 243.<br><br> 244.<br><br> 245. function calculateOffset(field, attr) {<br><br> 246.<br><br> 247. var offset = 0;<br><br> 248.<br><br> 249. while(field) {<br><br> 250.<br><br> 251. offset += field[attr];<br><br> 252.<br><br> 253. fieldfield = field.offsetParent;<br><br> 254.<br><br> 255. }<br><br> 256.<br><br> 257. return offset;<br><br> 258.<br><br> 259. }<br><br> 260.<br><br> 261.<br><br> 262.<br><br> 263. function populateName(cell) {<br><br> 264.<br><br> 265. inputField.value = cell.firstChild.nodeValue;<br><br> 266.<br><br> 267. clearNames();<br><br> 268.<br><br> 269. }<br><br> 270.<br><br> 271.<br><br> 272.<br><br> 273. function clearNames() {<br><br> 274.<br><br> 275. var ind = nameTableBody.childNodes.length;<br><br> 276.<br><br> 277. for (var i = ind - 1; i &gt;= 0 ; i--) {<br><br> 278.<br><br> 279. nameTableBody.removeChild(nameTableBody.childNodes[i]);<br><br> 280.<br><br> 281. }<br><br> 282.<br><br> 283. completeDiv.style.border = &quot;none&quot;;<br><br> 284.<br><br> 285. }<br><br> 286.<br><br> 287.<br><br> 288.<br><br> 289.

    290.

    291.

    292.

    293.

    294.

    295.

    showAllEmailFixes.html



    296.

    297.Names:

    298.

    299.

    300.


    301.

    302.


    303.

    304.

    305.

    306.

    307.

    308.


    309.

    310.

    311.

    312.
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题？

悬赏问题

  • ¥15 GDI处理通道视频时总是带有白色锯齿
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）
  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 Revit2020下载问题
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 单片机无法进入HAL_TIM_PWM_PulseFinishedCallback回调函数