AutoComplete-JQuery 应用

AutoComplete-JQuery　应用　

今天试了一下效果，有点像Ｇoogle下拉查询功能非常　棒

 

index.htm

<!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>
    <title>无标题页</title>
  <script src="thickbox/jquery-latest.js"></script>
  <link rel="stylesheet" href="thickbox/main.css" type="text/css" />
  <link rel="stylesheet" href="thickbox/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="thickbox/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="thickbox/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
//$("#example").autocomplete(data);
$("#example").autocomplete("m.aspx",{autoFill: true});
  });
  </script>

</head>
<body>
<input type="text" id="example" />
</body>
</html>

 

m.aspx

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

 

 m.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class M : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write(GetValues());
    }
    protected string GetValues()
    {
        string tmpstr = string.Empty;
        string str = Request.QueryString["q"];
        if (str != null)
        {
            if (str.Length > 0)
            {
                string[] ary = db.GetData(str);//取数据
                if (ary != null)
                {
                    foreach (string tmp in ary)
                    {
                        tmpstr += tmp + "\n";

                    }
                }
            }
        }
        return tmpstr;
    }
}

 

 Js下载地址


posted @ 2009-07-14 14:44  天纯蓝  阅读(892)  评论(0)    收藏  举报