jquery实现自动提示的文本框（仿baidu,google搜索)-jquery-网页制作-壹聚教程网jquery实现自动提示的文本框（仿baidu,google搜索)
&!doctype html public &-//w3c//dtd xhtml 1.0 transitional//en& &http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd&&
&title&jquery实现自动提示的文本框&/title&
font-family:arial, helvetica, sans-
font-size:12 padding:0 margin:5
form{padding:0 margin:0}
/* 用户输入框的样式 */
font-family:arial, helvetica, sans-
font-size:12 border:1px solid #000000;
width:200 padding:1 margin:0
/* 提示框div块的样式 */
position: width:202
color:#004a7e; font-size:12
font-family:arial, helvetica, sans-
left:41 top:25
#popup.show{
/* 显示提示框的边框 */
border:1px solid #004a7e;
/* 提示框的样式风格 */
list-style:
margin:0 padding:0
color:#004a7e;
li.mouver{
background-color:#004a7e;
&script language=&& src=&jquery.min.&&&/script&
&script language=&javascript&&
//考虑到很多函数中都要使用
//因此采用全局变量的形式
function initvars(){
//初始化变量
oinputfield = $(&#colors&);
opopdiv = $(&#popup&);
ocolorsul = $(&#colors_ul&);
function clearcolors(){
//清除提示内容
ocolorsul.empty();
opopdiv.removeclass(&show&);
function setcolors(the_colors){
//显示提示框，传入的参数即为匹配出来的结果组成的数组
clearcolors(); //每输入一个字母就先清除原先的提示，再继续
opopdiv.addclass(&show&);
for(var i=0;i&the_colors.i++)
//将匹配的提示结果逐一显示给用户
ocolorsul.append($(&&li&&+the_colors[i]+&&/li&&));
ocolorsul.find(&li&).click(function(){
oinputfield.val($(this).text());
clearcolors();
function(){$(this).addclass(&mouseover&);},
function(){$(this).removeclass(&mouseover&);}
function findcolors(){
initvars(); //初始化变量
if(oinputfield.val().length & 0){
//获取异步数据
$.get(&14-10.x&,{scolor:oinputfield.val()},
function(data){
var aresult = new array();
if(data.length & 0){
aresult = data.split(&,&);
setcolors(aresult); //显示服务器结果
clearcolors();
clearcolors(); //无输入时清除提示框（例如用户按del键）
&form method=&post& name=&myform1&&
color: &input type=&text& name=&colors& id=&colors& onkeyup=&findcolors();& /&
&div id=&popup&&
&ul id=&colors_ul&&&/ul&
&%@ page language=&c#& contenttype=&text/html& responseencoding=&gb2312& %&
&%@ import namespace=&system.data& %&
response.cachecontrol = &no-cache&;
response.addheader(&pragma&,&no-cache&);
string sinput = request[&scolor&].trim();
if(sinput.length == 0)
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&,&deekyblue&,&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;i&acolors.i++){
if(acolors[i].indexof(sinput) == 0)
sresult += acolors[i] + &,&;
if(sresult.length&0) //如果有匹配项
sresult = sresult.substring(0,sresult.length-1); //去掉最后的&,&号
response.write(sresult);
上一页： &&&&&下一页：相关内容文本框输入时 实现自动提示（像百度、google一样）
只要有三个文件： 一个js插件autocomplete.js和autocomplete.css两个文件，这是jquery官方网站提供的插件； 他们的下载地址：/demos/autocomplete/ 一个是一般处理程序 ； 一个是apsx页面，看下面的代码吧; 前台：
代码如下: &script type="text/javascript"& $(document).ready(function() { ShowUserList($("#TextBox1"), "LoginTest.ashx"); //TextBox1为文本框的ID，loginTest.ashx为请求的一般处理程序。 function ShowUserList(obj, url) { $.getJSON( url, function(msg) { var names = new Array(); msg = msg.T var names = new Array(); for (var i = 0; i & msg. i++) { names.push(msg[i].loginName); } obj.focus().autocomplete(names); } ); } }); &/script& &/head& &body& &form id="form1" runat="server"& &div& 用户名：&asp:TextBox ID="TextBox1" runat="server"&&/asp:TextBox& &asp:Button ID="Button1" runat="server" Text="登录" /& &/div& &/form& &/body&
后台是一般处理程序：
代码如下: public class LoginTest : IHttpHandler {
public void ProcessRequest(HttpContext context) { getUserName(); context.Response.Write(str); } public bool IsReusable { get {
} } private void getUserName() { DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text); str = ConvertJson.ToJson(ds); } }
运行结果：&
顶一下(0) 踩一下(0)
热门标签：网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
文本框输入时 实现自动提示（像百度、google一样）
只要有三个文件： 一个js插件autocomplete.js和autocomplete.css两个文件，这是jquery官方网站提供的插件； 他们的下载地址： 一个是一般处理程序 ； 一个是apsx页面，看下面的代码吧; 前台： . 代码如下: &script type="text/javascript"& $(document).ready(function() { ShowUserList($("#TextBox1"), "LoginTest.ashx"); //TextBox1为文本框的ID，loginTest.ashx为请求的一般处理程序。 function ShowUserList(obj, url) { $.getJSON( url, function(msg) { var names = new Array(); msg = msg.T var names = new Array(); for (var i = 0; i & msg. i++) { names.push(msg[i].loginName); } obj.focus().autocomplete(names); } ); } }); &/script& &/head& &body& &form id="form1" runat="server"& &div& 用户名：&asp:TextBox ID="TextBox1" runat="server"&&/asp:TextBox& &asp:Button ID="Button1" runat="server" Text="登录" /& &/div& &/form& &/body&
后台是一般处理程序： . 代码如下: public class LoginTest : IHttpHandler {
public void ProcessRequest(HttpContext context) { getUserName(); context.Response.Write(str); } public bool IsReusable { get {
} } private void getUserName() { DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text); str = ConvertJson.ToJson(ds); } }
运行结果：
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：