ajax即时筛选(用DIV与下拉框测试；下拉框做成可输入的显示效果就理佳)

来源：互联网发布：linux 新建文件命令编辑：程序博客网时间：2024/05/10 18:18

前台代码：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ajax即时筛选(用DIV与下拉框测试；下拉框做成可输入的显示效果就理佳)</title>
    <script language="javascript">
    function AjAX(key)
    {
    　document.getElementById("divajax").innerHTML="数据正在加载...";
    　var s1=document.getElementById("dl1");
      AjaxTool.CarInfoDt(key.value,function(res)
      {
        var tb=res.value;
        if(tb!=null)
        {
          if(tb.Rows.length==0)
          {
            document.getElementById("divajax").innerHTML="没有此记录";
          }
          else
          {
              s1.options.length=0;
              for(var i=0;i< parseInt(tb.Rows.length);i++)
              {
                var name=tb.Rows[i].CarName;
                var id=tb.Rows[i].CarID;
                s1.options.add(new Option(name,id));
              }
              AjaxTool.ReadInfo(tb,function(str)
              {
                document.getElementById("divajax").innerHTML=str.value;
              })
          }
        }
      })
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input name="keyname" type="text" id="keyname" style="height:22px; padding-top:5px; width: 319px;" onfocus="this.value=''" onkeyup="AjAX(this)" value="请输入查询关键字"/>
    <select id="dl1" name="dl1" runat="server"></select>
    <div id="divajax" style="position:absolute;width:331px; height:200px; left: 11px; top: 50px; font-size:12px; overflow-y:auto;">
    </div>
    </div>
    </form>
</body>
</html>

后台代码：

public partial class AjaxTool : System.Web.UI.Page
{
    BllCarInfo dal = new BllCarInfo();
    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxTool));
    }

    #region "返回车型的DataTable对象"
    /// <summary>
    /// 返回车型的DataTable对象
    /// </summary>
    [AjaxPro.AjaxMethod]
    public DataTable CarInfoDt(string ColValue)
    {
        DataSet ds = dal.GetList("zm", ColValue);
        return ds.Tables[0];
    }
    #endregion

    #region "绑定数据到Table并返回"
    /// <summary>
    /// 绑定数据到Table并返回
    /// </summary>
    /// <param name="CarID">车型档安主键ID</param>
    /// <param name="Pic">车型图片名称</param>
    /// <param name="TypeName">车型所对应的类型名称</param>
    /// <returns>table集</returns>
    [AjaxPro.AjaxMethod]
    public string ReadInfo(DataTable dt)
    {
        StringBuilder str = new StringBuilder();
        str.Append("<table width=138 border=/"0/" cellspacing=/"0/" class=/"datatab/" cellpadding=/"0/">");
        for (int i = 1; i < dt.Rows.Count + 1; i++)
        {
            str.Append("<tr><td align=/"left/" width=/"138/" height=/"52/">");
            str.Append("<a href='CarInfoDetails.aspx?cid=" + dt.Rows[i - 1]["ChildID"].ToString() + "&carid=" + dt.Rows[i - 1]["CarID"].ToString() + "'><img src=/"ComPic/CarInfo/" + dt.Rows[i - 1]["CarPicName"].ToString() + "/" align=/"absMiddle/" border=/"0/" height=/"50px/" width=/"50px/" /></a> <a href='CarInfoDetails.aspx?cid=" + dt.Rows[i - 1]["ChildID"].ToString() + "&carid=" + dt.Rows[i - 1]["CarID"].ToString() + "'>" + dt.Rows[i - 1]["CarName"].ToString() + "</a>");
            str.Append("</td></tr>");
        }
        str.Append("</table>");
        return str.ToString();
    }
    #endregion
}

我是用存储过程实现的代码如下：

ALTER PROCEDURE Pro_CarInfo_GetList
@strWhere varchar(50),
@ColValue varchar(50)
AS
if(@strWhere='all')
begin
SELECT
ci.CarID,ci.ChildID,ci.CarName,ci.CarDetails,ci.TypeID,ci.TypeName,ci.CarZm,ci.PingPai,ci.CarPicName,cct.ChildTypeName
from CarInfo ci join ChildCarType cct on ci.ChildID=cct.ChildID order by CarName
end
else if(@strWhere='zm')
begin
SELECT
ci.CarID,ci.ChildID,ci.CarName,ci.CarDetails,ci.TypeID,ci.CarZm,ci.PingPai,ci.CarPicName,cct.ChildTypeName
from CarInfo ci join ChildCarType cct on ci.ChildID=cct.ChildID
WHERE ci.CarZm=@ColValue order by CarName
end

备注：要实现这个功能，你要先去下载个AjaxPro.2.dll组件，然后在web.config进行如下配置：

<httpHandlers>
      
   <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
  </httpHandlers>