AutoComplete-JQuery 应用

AutoComplete-JQuery 应用 

今天试了一下效果,有点像Google下拉查询功能非常 棒

 

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  天纯蓝  阅读(884)  评论(0编辑  收藏  举报