jquery autocomplete自动完成插件的的使用方法_Javascript教程-查字典教程网
jquery autocomplete自动完成插件的的使用方法
jquery autocomplete自动完成插件的的使用方法
发布时间:2016-12-30 来源:查字典编辑
摘要:首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css。由于该控件获得数据可以从数组...

首先下载所需文件,jquery.autocomplete.js和jquery.autocomplete.css。

由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下。

前台代码如下:

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script src="Scripts/jquery.autocomplete.js" type="text/javascript"></script>

<link href="Styles/jquery.autocomplete.css" type="text/css" />

<script language="javascript" type="text/javascript">

//直接由数组获得

$(document).ready((function () {

var data = ["河北省", "河南省", "山东", "北京", "天津"];

$("#txtProvince").autocomplete(data);

//由SERVER端获得

$("#txtUser").autocomplete("GetUserName.aspx");

}

));

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

省份:<input id="txtProvince" type="text" />

</div>

<div>

用户名:<input id="txtUser" type="text" /></div>

</form>

</body>

</html>

其中用户名部分是从后台读取数据,相应的URL为GetUserName.aspx。该页面的.cs文件为:

复制代码 代码如下:

protected void Page_Load(object sender, EventArgs e)

{

//默认传入的键值为q

if (Request.QueryString["q"] != null)

{

string key = Request.Params["q"].ToString();

string result = "";

db db = new db();

string sql = "select UserName from Users where UserName like '" + key + "%'";

SqlDataReader dr = db.GetReader(sql);

while (dr.Read())

{

result += dr["UserName"].ToString() + "n";

}

if (result == "")

result = "not exists";

Response.Write(result);

}

}

写完之后发现可以实现想要的功能,可是样式老是有问题。显示出来的结果列表挺丑的,好像没有套用上CSS。想了半天也没看出哪的问题来。今天早上猛然发现犯了一个低级错误啊,少写了rel="stylesheet",MY GOD!服了自己了。

一个简单的例子到此完成了。继续学习。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类