يقلد ASP Google اقتراح أسلوب لتحقيق تأثير القائمة المنسدلة

تقدم هذه المقالة بشكل أساسي ASP لتقليد Google اقتراحًا لتحقيق تأثير القائمة المنسدلة.

اليوم ، سوف أستخدم ASP لتقليد القائمة المنسدلة لـ Google اقتراح

1. رمز المقدمة:

1. <٪@language = javaScriptCodePage = 936 ٪>
2. <! doctypehtmlpublic-// w3c // dtdxhtml1.0transternal // en
4. http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
5. <htmlxmlns = http: //www.w3.org/1999/xhtml>
6. <Tyletype = text/css>
7. <!-
8. .style1 {color:#ff0000}
9. .houseout
10. {
11. حجم الخط: 12 بكسل ؛
12. الخلفية:#708090 ؛
13. اللون: #fffafa ؛
14. }
16. .mouseover
17. {
18. حجم الخط: 12 بكسل ؛
19. الخلفية: #fffafa ؛
20. اللون:#000000 ؛
21. }
22. ->
23. </style>
24. <scriptType = text/javaScriptLanguage = javaScript>
25. varxmlhttp ؛
26. varcompletediv.
27. Variinputfield ؛
28. varnametable
29. varnametable ؛
30. varflag = false ؛
32. functionCreatexMlHttPrequest () {
33. if (window.activexobject) {
34. XMLHTTP = NewActivexObject (Microsoft.xmlHttp) ؛
35. }
36. elseif (window.xmlhttprequest) {
37. xmlhttp = newxmlhttprequest () ؛
38. }
39. }
41. functionSetFlag () {
42. العلم = صحيح ؛
43. }
45. FunctionDissElect ()
46. {
47. إذا (العلم == خطأ)
48. document.getElementById (popup) .style.display = none ؛
49. }
51. functionInitvars () {
52. inputField = document.getElementById (frmchangshang) ؛
53. nametable = document.getElementById (name_table) ؛
54. completeiv = document.getElementById (popup) ؛
55. nametablebody = document.getElementById (name_table_body) ؛
56. document.getElementById (popup) .style.display = block ؛
57. }
59. FunctionFindNames () {
60. initvars () ؛
61. if (inputfield.value.length> 0)
62. {
63. createxmlHttprequest () ؛
64. varurl = search.asp؟ names =+inputfield.value ؛
65. xmlhttp.open (get ، url ، true) ؛
66. XMLHTTP.OnReadyStateChange = رد الاتصال ؛
67. xmlhttp.send (null) ؛
68. }
69. آخر
70. {
71. ClearNames () ؛
72. }
73. }
75. functionCallback () {
76. if (xmlhttp.readyState == 4) {
77. if (xmlhttp.status == 200)
78. {
79. يحاول
80. {
81. varname = xmlhttp.responsexml.getElementsbyTagname (الاسم)
83. [0] .firstchild.data ؛
84. }
85. الصيد (ه)
86. {
87. document.getElementById (popup) .style.display = none ؛
88. ClearNames () ؛
89. }
90. setNames (xmlhttp.responsexml.getElementsByTagName (content)) ؛
91. }
92. elseif (xmlhttp.status == 204)
93. {
94. ClearNames () ؛
95. }
96. }
97. }
99. FunctionSetNames (the_names) {
100. ClearNames () ؛
101. varsize = the_names.length ؛
102. setoffsets () ؛
103. فارو ، الخلية ، يمتد.
104. لـ (vari = 0 ؛ i <size ؛ i ++) {
105. //varnextnode=the_names budapi.
106. vare = the_names [i] ؛
107. // احصل على محتوى العقدة الفرعية وأعيد تحميله في صفيف
108. varnextNode =
109. // إنشاء TR ، TD ، عناصر span
110. الصف = document.createElement (tr) ؛
111. الخلية = document.createElement (TD) ؛
112. //spans=document.createElement(span) ؛
113. // تعيين خصائص الخلية
114. cell.onmouseout = function () {this.className = 'mouseover' ؛ flag = false ؛} ؛
115. cell.onmouseover = function () {this.className = 'mouseout' ؛ flag = true ؛} ؛
116. cell.setattribute (bgColor ،#fffafa) ؛
117. cell.setattribute (الحدود ، 0) ؛
118. //cell.setattribute (onMouseover ، setFlag ()) ؛
119. cell.onclick = function () {populatename (this) ؛} ؛
120. // أضف NextNode إلى TD
121. vartxtName = document.createTextNode (nextNode) ؛
122. cell.appendchild (txtName) ؛
123. // تحميل البيانات المخفية إلى العنصر
124. row.appendchild (Cell) ؛
125. nametabledody.appendchild (row) ؛
126. }
127. }
129. functionSetOffSets () {
130. varend = inputField.OffSetWidth ؛
131. varleft = calculateOffSetLeft (InputField) ؛
132. vartop = calculateOffSetTop (inputfield)+inputfield.offsetheight ؛
134. completev.style.border = Black1pxSolid ؛
135. completev.style.left = left+px ؛
136. completev.style.top = Top+px ؛
137. nametable.style.width = 400px ؛
138. }
140. functionCalculateOffSetLeft (حقل) {
141. ReturnCalculateOffset (الحقل ، OffsteLft) ؛
142. }
144. functionCalculateOffSettop (الحقل) {
145. ReturnCalculateOffset (الحقل ، Offsettop) ؛
146. }
148. functionCalculateOffset (الحقل ، attr) {
149. varoffset = 0 ؛
150. بينما (الحقل) {
151. الإزاحة+= الحقل [attr] ؛
152. الحقل = field.OffSetParent ؛
153. }
154. مرجع الإرجاع
155. }
157. FunctionPopulatename (الخلية) {
158. // املأ البيانات إلى صفحة الويب ، الخلية ----> كائن TD
159. inputfield.value = cell.firstchild.nodevalue ؛
160. ClearNames () ؛
161. }
162. // امسح صفيف القائمة
163. FunctionClearNames () {
164. varind = nametabledody.childnodes.length ؛
165. لـ (vari = ind-1 ؛ i> = 0 ؛ i-) {
166. nametablebody.removechild (nametablebody.childnodes [i]) ؛
167. }
168. completev.style.border = none ؛
169. }
170. </script>
171. <head>
172. <metahttp-equiv = content-typecontent = text/html ؛ charset = gb2312/>
173. <title> UntitleDDocument </itlem>
174. </head>
176. <body>
177. <inputName = frmChangShangClass = inputTextId = frmchangshangstyle = width: 250px ؛
179. onblur = diselect () ؛ onKeyup = findNames () ؛ الحجم = 50maxLength = 100>
180. <spanclass = style1> نصيحة: أدخل الكلمات الرئيسية وسيطابقك البرنامج تلقائيًا من المكتبة
182. إذا لم يكن السجل موجودًا ، املأه بنفسك
183. </span>
184. <divstyle = الموضع: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ id = popup>
185. <tableid = name_tablebgcolor =#fffafaborder = 0cellspacing = 0
187. cellpadding = 0>
188. <tbodyId = name_table_body> </tbody>
189. </table>
190. </div>
191. </body>
192. </html>

2.

ما عليك سوى تغيير عبارة SQL والحقول المراد عرضها على التنسيق المقابل لقاعدة البيانات الخاصة بك.

1. <!-#includevirtual = conn.asp->
2. <٪
3. الكلمة الرئيسية = request.querystring (أسماء)
4. SQL = SELECTLGID ، LGMCFROMGWHERELGMMCLIKE '٪ والكلمة الرئيسية و ٪' Orderbylgiddesc
5. setRs = server.createBject (adodb.recordset)
6. Rs.Opensql ، Conn ، 1،1
7. استجابة. contenttype = text/xml
8. استجابة. write <؟ xmlversion = 1.0encoding = gb2312؟>
9. استجابة
10. dowhilenotrs.eof
11. استجابة
12. Response.write <ame> & rs (LGMC) & </name>
13. 'Response.write <Servid> & rs (userId) و </userD>
14. 'response.write <startime> & rs (startime) & </startime>
15. 'response.write < -endtime> & rs (Endtime) & </endtime>
16. استجابة. write </content>
17. Rs.Movenext
18. حلقة
19. استجابة. write </response>
20. Rs.close
21. setRs = لا شيء
22. ٪>

ما سبق هو رمز ASP لتقليد أسلوب Google اقتراح لتحقيق تأثير القائمة المنسدلة.