Ajax搜索框的自动提示功能

来源：互联网发布：vb怎么安装msdn 编辑：程序博客网时间：2024/05/05 19:22
Html页部分
————————————————————————————————————————
<!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>
    <script type="text/javascript" src="lib/jquery.js">
    </script>
    <script type='text/javascript' src='lib/jquery.bgiframe.min.js'></script>
    <script type='text/javascript' src='lib/jquery.ajaxQueue.js'></script>
    <script type='text/javascript' src='lib/thickbox-compressed.js'></script>
    <script type='text/javascript' src='lib/jquery.autocomplete.js'></script>
    <script type='text/javascript' src='lib/localdata.js'></script>
    <link rel="stylesheet" type="text/css" href="lib/main.css" />
    <link rel="stylesheet" type="text/css" href="lib/jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="lib/thickbox.css" />
    <script type="text/javascript">
$().ready(function() {
    
        $("#username").autocomplete("AutoTip.aspx",   
             { delay:10, 
               minChars:1,
               matchSubset:1,
               matchContains:false,   
              cacheLength:10,  
              onItemSelect:selectItem,   
              onFindValue:findValue,      
              formatItem:formatItem,   
              autoFill:false     
              });
    
    })
    function findValue(li) {
    if( li == null ) return alert("No match!");
     // if coming from an AJAX call, let's use the CityId as the value     
     if( !!li.extra ) var sValue = li.extra[0];   
     // otherwise, let's just display the value in the text box 
     else var sValue = li.selectValue; 
        //alert("The value you selected was: " + sValue); 
        }
    
    function selectItem(li) 
    {    findValue(li);
    }
    
    
    function formatItem(row) 
    {    return row[0];
    
    //return row[0] + " (id: " + row[1] + ")"    //如果有其他参数调用row[1]，对应输出格式Sparta|896 
    }
    
    function lookupAjax(){
         var oSuggest = $("#username")[0].autocompleter;
             oSuggest.findValue();
           return false;
           }
    
    </script>
</head>
<body>
   
    <p>
        <label>
            Month (local):</label>
        <input type="text" id="month" />
    </p>
    <p>
         </p>
    <br />
    <br />
    <p>
         </p>
    <br />
    <br />
    <p>
        <label>
            E-Mail (local):</label>
        <input type="text" id="suggest13" />
    </p>
    <p>
         </p>
    <p>
        <label>
           用户名测试:</label>
        <input type="text" id="username" autocomplete="off" />
    </p>
</body>
</html>
————————————————————————————————————————————————————
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class AutoTip : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            if (Request.QueryString["q"] != null && Request.QueryString["q"] != "")
            {
                Response.Clear();
                Response.Charset = "utf-8";
                Response.Buffer = true;
                this.EnableViewState = false;
                Response.ContentEncoding = System.Text.Encoding.UTF8;
                Response.ContentType = "text/plain";
                Response.Write(GetLikeUserName(Request.QueryString["q"]));
                Response.Flush();
                Response.Close();
                Response.End();
            }
        }
    }
    private String GetLikeUserName(String namestr)
    {
        string strSql = "select name from autoTest where name " +
                        "like '" + namestr + "%" + "' order by name";
        DataTable dtQuestions = FillDataTable(strSql);
        var sbstr = new System.Text.StringBuilder();
        foreach (DataRow row in dtQuestions.Rows)
        {
            sbstr.Append(row["name"].ToString());
            sbstr.Append("/n");
        }
        return sbstr.ToString();
    }
    public DataTable FillDataTable(string strQuery)
    {
        DataSet ds = myJQuery.DBUtility.DbHelperSQL.Query(strQuery);
        return ds.Tables[0];
    }
}
——————————————————————————————————————————----
AutoTip.aspx.cs部分
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class AutoTip : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            if (Request.QueryString["q"] != null && Request.QueryString["q"] != "")
            {
                Response.Clear();
                Response.Charset = "utf-8";
                Response.Buffer = true;
                this.EnableViewState = false;
                Response.ContentEncoding = System.Text.Encoding.UTF8;
                Response.ContentType = "text/plain";
                Response.Write(GetLikeUserName(Request.QueryString["q"]));
                Response.Flush();
                Response.Close();
                Response.End();
            }
        }
    }
    private String GetLikeUserName(String namestr)
    {
        string strSql = "select name from autoTest where name " +
                        "like '" + namestr + "%" + "' order by name";
        DataTable dtQuestions = FillDataTable(strSql);
        var sbstr = new System.Text.StringBuilder();
        foreach (DataRow row in dtQuestions.Rows)
        {
            sbstr.Append(row["name"].ToString());
            sbstr.Append("/n");
        }
        return sbstr.ToString();
    }
    public DataTable FillDataTable(string strQuery)
    {
        DataSet ds = myJQuery.DBUtility.DbHelperSQL.Query(strQuery);
        return ds.Tables[0];
    }
}