分享二个自动提示的文本框效果的js实现代码。
例一，直接编写ajax 实现。 客户端：
ajax实现自动提示的文本框_bbs.it-home.org color:
复制代码
服务器端（9-10.aspx ）：
response.cachecontrol = no-cache; response.addheader(pragma,no-cache); string sinput = request[scolor].trim(); if(sinput.length == 0) return; string sresult = ; string[] acolors = new string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrblue,cornsilk,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkhaki,darkmagenta,darkolivegreen,darkorchid,darkorenge,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dodgerblue,feldspar,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,gold,goldenrod,golenrod,gostwhite,gray,green,greenyellow,honeydew,hotpink,indianred,inen,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgodenrod,lightgodenrodyellow,lightgray,lightgreen,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,navyblue,oldlace,olivedrab,orange,orchid,orengered,palegodenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,quartz,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,scarlet,seagreen,seashell,sienna,silver,skyblue,slategray,snow,springgreen,steelblue,tan,thistle,tomato,turquoise,violet,violetred,wheat,whitesmoke,yellow,yellowgreen}; for(int i=0;iif(acolors[i].indexof(sinput) == 0) sresult += acolors[i] + ,; } if(sresult.length>0) //如果有匹配项 sresult = sresult.substring(0,sresult.length-1); //去掉最后的“,”号 response.write(sresult); %>
复制代码
例二，使用jquery 实现。 客户端：
jquery实现自动提示的文本框)); ocolorsul.find(li).click(function(){ oinputfield.val($(this).text()); clearcolors(); }).hover( function(){$(this).addclass(mouseover);}, function(){$(this).removeclass(mouseover);} ); } function findcolors(){ initvars(); //初始化变量 if(oinputfield.val().length > 0){ //获取异步数据 $.get(14-10.aspx,{scolor:oinputfield.val()}, function(data){ var aresult = new array(); if(data.length > 0){ aresult = data.split(,); setcolors(aresult); //显示服务器结果 } bbs.it-home.orgelse clearcolors(); }); } else clearcolors(); //无输入时清除提示框（例如用户按del键） } color:
复制代码
服务器端（14-10.aspx ）：
response.cachecontrol = no-cache; response.addheader(pragma,no-cache); string sinput = request[scolor].trim(); if(sinput.length == 0) return; string sresult = ; string[] acolors = new string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brass,bronze,brown,burlywood,cadetblue,chartreuse,chocolate,copper,coral,cornfloewrblue,cornsilk,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkhaki,darkmagenta,darkolivegreen,darkorchid,darkorenge,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dodgerblue,feldspar,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,gold,goldenrod,golenrod,gostwhite,gray,green,greenyellow,honeydew,hotpink,indianred,inen,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgodenrod,lightgodenrodyellow,lightgray,lightgreen,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,lightyellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,navyblue,oldlace,olivedrab,orange,orchid,orengered,palegodenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,quartz,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,scarlet,seagreen,seashell,sienna,silver,skyblue,slategray,snow,springgreen,steelblue,tan,thistle,tomato,turquoise,violet,violetred,wheat,whitesmoke,yellow,yellowgreen}; for(int i=0;iif(acolors[i].indexof(sinput) == 0) sresult += acolors[i] + ,; } if(sresult.length>0) //如果有匹配项 sresult = sresult.substring(0,sresult.length-1); //去掉最后的“,”号 response.write(sresult); %>
复制代码