.Net 文本框实现内容提示的实例代码(仿Google、Baidu)

1.Demo下载:

文本框实现内容提示(仿Google、Baidu).rar

2.创建数据库、表(我用的sqlserver2008数据库)

代码如下:

CREATE TABLE Ceshi
(
   id VARCHAR(50) PRIMARY KEY NOT NULL,
   cname VARCHAR(30)
)
GO
INSERT INTO Ceshi
SELECT NEWID(),'jack1' UNION
SELECT NEWID(),'jack2' UNION
SELECT NEWID(),'jack3' UNION
SELECT NEWID(),'jack4' UNION
SELECT NEWID(),'jack5' UNION
SELECT NEWID(),'peter1' UNION
SELECT NEWID(),'peter2' UNION
SELECT NEWID(),'peter3' UNION
SELECT NEWID(),'peter4' UNION
SELECT NEWID(),'peter5'
go

3.创建自定义函数


代码如下:

create function [dbo].[f_GetPy](@str nvarchar(4000))
returns nvarchar(4000)
as
begin
declare @strlen int,@re nvarchar(4000)
declare @t table(chr nchar(1) collate Chinese_PRC_CI_AS,letter nchar(1))
insert into @t(chr,letter)
select '吖 ', 'A ' union all select '八 ', 'B ' union all
   select '嚓 ', 'C ' union all select '咑 ', 'D ' union all
   select '妸 ', 'E ' union all select '发 ', 'F ' union all
   select '旮 ', 'G ' union all select '铪 ', 'H ' union all
   select '丌 ', 'J ' union all select '咔 ', 'K ' union all
   select '垃 ', 'L ' union all select '嘸 ', 'M ' union all
   select '拏 ', 'N ' union all select '噢 ', 'O ' union all
   select '妑 ', 'P ' union all select '七 ', 'Q ' union all
   select '呥 ', 'R ' union all select '仨 ', 'S ' union all
   select '他 ', 'T ' union all select '屲 ', 'W ' union all
   select '夕 ', 'X ' union all select '丫 ', 'Y ' union all
   select '帀 ', 'Z '
   select @strlen=len(@str),@re= ' '
   while @strlen> 0
   begin
     select top 1 @re=letter+@re,@strlen=@strlen-1
     from @t a where chr <=substring(@str,@strlen,1)
     order by chr desc
     if @@rowcount=0
     select @re=substring(@str,@strlen,1)+@re,@strlen=@strlen-1
   end
   return(@re)
end
GO

4.asp.net前台页面(需要添加2个引用:AjaxControlToolkit.dll,AutoCompleteExtra.dll)


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TextBoxAuto.aspx.cs" Inherits="WebApplication1.TextBoxAuto" %>

<%@ Register Assembly="AutoCompleteExtra" Namespace="AutoCompleteExtra" TagPrefix="cc1" %>
<!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>
    <style type="text/css">
        .searchTextBox
        {
            border: 1px solid #e1e1e1;
            border-collapse: separate;
            border-spacing: 0;
            padding: 2px 2px 2px 2px;
            white-space: nowrap;
            margin-left: 2px;
            height: 28px;
            line-height: 28px;
            margin-right: 5px;
            font-family: 微软雅黑,宋体;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div>
                <div class="dd2">
               请输入姓名: <asp:TextBox CssClass="searchTextBox" runat="server" ID="txtCompanyName" Style="width: 280px;"></asp:TextBox>
                    <cc1:AutoCompleteExtraExtender ID="AutoCompleteExtraExtender1" runat="server" ServiceMethod="GetCompanyNameList"
                        TargetControlID="txtCompanyName" AsyncPostback="false" UseContextKey="True" AutoPostback="false"
                        MinimumPrefixLength="1" CompletionInterval="10">
                    </cc1:AutoCompleteExtraExtender>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

5.后台页面


代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Oceansoft.Net.Bll;

namespace WebApplication1
{
    public partial class TextBoxAuto : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

}

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
        public static string[][] GetCompanyNameList(string prefixText, int count, string contextKey)
        {
            //获取自动完成的选项数据
            List<string[]> list = new List<string[]>();
            List<string> nameList = new List<string>();
            List<string> idList = new List<string>();
            CeshiManage ceshimanage = new CeshiManage();

ceshimanage.GetTopUserName(count, prefixText.ToUpper(), out idList, out nameList);
            for (int i = 0; i < nameList.Count; i++)
            {
                string[] Respuesta = new string[2];
                Respuesta[0] = nameList[i];
                Respuesta[1] = idList[i];
                list.Add(Respuesta);
            }
            return list.ToArray();
        }
    }
}

6.后台页面用到的方法(管理类)


代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using Oceansoft.Net.Bll;
using SubSonic;
using System.Transactions;

using System.Data;
using Oceansoft.Net.Dal;

namespace Oceansoft.Net.Bll
{
    /// <summary>
    /// :ceshi
    /// :jibp
    /// :2014-2-27 15:52:15
    ///</summary>
    public class CeshiManage
    {

private SqlQuery m_sqlquery = Oceansoft.Net.Dal.DB.Select().From(Ceshi.Schema);

/// <summary>
        /// Ceshi查询器
        /// </summary>
        public SqlQuery CeshiSelecter
        {
            get { return m_sqlquery; }
            set { m_sqlquery = value; }
        }

/// <summary>
        /// 构造函数,设置查询器
        ///</summary>
        public CeshiManage()
        {
            m_sqlquery = m_sqlquery.Where("id").IsNotEqualTo("");
        }

#region Ceshi管理

/// <summary>
        /// 获取ceshi列表
        /// </summary>
        /// <returns></returns>
        public List<Ceshi> getCeshiList()
        {

return CeshiSelecter.ExecuteTypedList<Ceshi>();
        }

/// <summary>
        /// 获取ceshi列表,同时分页操作
        /// </summary>
        /// <returns></returns>
        public List<Ceshi> getCeshiList(int currentPage, int pageSize, out int RecordCount)
        {
            RecordCount = m_sqlquery.GetRecordCount();
            return CeshiSelecter
            .Paged(currentPage, pageSize)
            .ExecuteTypedList<Ceshi>();
        }

/// <summary>
        /// 新增 ceshi
        /// </summary>
        /// <param name="HandleEntity"></param>
        /// <param name="sErr"></param>
        /// <returns></returns>
        public bool AddCeshi(Ceshi beAddMode, out string sErr)
        {

sErr = "";
            bool bRet = true;
            try
            {

using (TransactionScope sc = new TransactionScope())
                {
                    //此处写代码
                    //流水编号的生成
                    //GenerateNo No = new GenerateNo();
                    //No.TableName = "Ceshi"; //表名
                    //No.NoName = "XXX";   //流水号前字母
                    //No.ColName = "CC_Number";  //编号字段
                    //No.CreateTime = "CC_CreateTime";  //日期字段
                    //string BillNo = "";
                    //Customer_Comp.CC_Number = No.AutoGenerateNo();
                    beAddMode.IsNew = true;
                    beAddMode.Save();
                    //LogHelper.WriteLog(logType.新增 , logModule.Deptrelation,"ceshi新增成功("+beAddMode.GetPrimaryKeyValue().ToString()
                    //+")!");
                    //如果生成扩展类请使用add方法方法
                    sc.Complete();
                }
            }
            catch (Exception ex)
            {
                sErr = "ceshi新增不成功!";
                return false;
            }

sErr = "ceshi新增成功!";
            return bRet;

}

/// <summary>
        /// 修改 ceshi
        /// </summary>
        /// <param name="HandleEntity"></param>
        /// <param name="sErr"></param>
        /// <returns></returns>
        public bool UpdataCeshi(Ceshi beUpdataMode, out string sErr)
        {

sErr = "";
            bool bRet = true;
            try
            {

using (TransactionScope sc = new TransactionScope())
                {

//如果生成扩展类请使用Update()方法方法
                    beUpdataMode.IsNew = false;
                    beUpdataMode.Save();
                    //LogHelper.WriteLog(logType.修改 , logModule.Deptrelation,"ceshi修改成功("+beUpdataMode.GetPrimaryKeyValue().ToString()
                    //+")!");

sc.Complete();
                }
            }
            catch (Exception ex)
            {
                sErr = "ceshi修改不成功!";
                return false;
            }

sErr = "ceshi修改成功!";
            return bRet;

}

/// <summary>
        /// 删除 ceshi
        /// </summary>
        /// <param name="HandleEntity"></param>
        /// <param name="sErr"></param>
        /// <returns></returns>
        public bool DeleteCeshi(Ceshi beDeleteMode, out string sErr)
        {
            sErr = "";
            bool bRet = true;
            try
            {

using (TransactionScope sc = new TransactionScope())
                {
                    //如果生成扩展类请使用Delete()方法方法
                    Ceshi.Delete(beDeleteMode.GetPrimaryKeyValue());
                    //LogHelper.WriteLog(logType.删除 , logModule.Deptrelation,"ceshi删除成功("+beDeleteMode.GetPrimaryKeyValue().ToString()
                    //+")!");
                    sc.Complete();
                }
            }
            catch (Exception ex)
            {
                sErr = "ceshi删除不成功!";
                return false;
            }

sErr = "ceshi删除成功!";
            return bRet;

}

/// <summary>
        /// 删除 ceshi 列表
        /// </summary>
        /// <param name="HandleEntity"></param>
        /// <param name="sErr"></param>
        /// <returns></returns>
        public bool DeleteCeshiList(List<Ceshi> lstCeshi, out string sErr)
        {

sErr = "";
            int ii = 0;
            bool bRet = true;
            try
            {

using (TransactionScope sc = new TransactionScope())
                {
                    //如果生成扩展类请使用Delete()方法方法
                    foreach (Ceshi bedelmode in lstCeshi)
                    {
                        ii++;
                        Ceshi.Delete(bedelmode.GetPrimaryKeyValue());

//LogHelper.WriteLog(logType.删除 , logModule.Deptrelation,"ceshi删除成功("+bedelmode.GetPrimaryKeyValue().ToString()
                        //+")!");
                    }
                    sc.Complete();
                }
            }
            catch (Exception ex)
            {
                sErr = "ceshi删除不成功!";
                return false;
            }

sErr = "共" + ii.ToString() + "条单据删除成功!";
            return bRet;

}

public  void GetTopUserName(int topCount, string name, out List<string> listId, out  List<string> listcname)
        {
            string sql = string.Format(@"Select id,cname from(Select ROW_NUMBER() over(order by cname)as ROWNUM," +
                "id,cname FROM [dbo].[Ceshi] where cname like '%" + name + "%' or  dbo.f_GetPy(cname) like '%" + name + "%') as ta where ta.ROWNUM <= " + topCount);
            DataTable dt = new DataTable();
            QueryCommand qc = new InlineQuery().GetCommand(sql);
            dt = DataService.GetDataSet(qc).Tables[0];//将查询出来的数据集放到List中去(查询数据的方法,有很多,这边我用的是Subsonic类自带的查询方法)
            listcname = new List<string>();
            listId = new List<string>();
            foreach (DataRow row in dt.Rows)
            {

listId.Add(row[0].ToString());
                listcname.Add(row[1].ToString());

}

}

#endregion

}
}

7.webconfig配置

代码如下:

<?xml version="1.0"?>

<!--
  有关如何配置 ASP.NET 应用程序的详细信息,请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <configSections>
    <section name="SubSonicService" type="SubSonic.SubSonicSection, SubSonic" requirePermission="false"/>
  </configSections>
  <connectionStrings>
    <add name="DemoTo" connectionString="Data Source=172.17.118.197;Initial Catalog=DemoTo;User Id=sa;Password=password01!;" providerName="System.Data.SqlClient"/>
  </connectionStrings>
  <SubSonicService defaultProvider="DemoTo">
    <providers>

<add name="DemoTo" type="SubSonic.SqlDataProvider, SubSonic" connectionStringName="DemoTo" generatedNamespace="Oceansoft.Net" maxPoolSize="2000"/>

</providers>
  </SubSonicService>

<system.web>
    <compilation debug="true" targetFramework="4.0" />

<authentication mode="Forms">
      <forms loginUrl="~/Account/Login.aspx" timeout="2880" />
    </authentication>

<membership>
      <providers>
        <clear/>
        <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="ApplicationServices"
             enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false"
             maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10"
             applicationName="/" />
      </providers>
    </membership>

<profile>
      <providers>
        <clear/>
        <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider" connectionStringName="ApplicationServices" applicationName="/"/>
      </providers>
    </profile>

<roleManager enabled="false">
      <providers>
        <clear/>
        <add name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider" connectionStringName="ApplicationServices" applicationName="/" />
        <add name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider" applicationName="/" />
      </providers>
    </roleManager>

</system.web>

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

(0)

相关推荐

  • .Net 文本框实现内容提示的实例代码(仿Google、Baidu)

    1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据库) 复制代码 代码如下: CREATE TABLE Ceshi(   id VARCHAR(50) PRIMARY KEY NOT NULL,   cname VARCHAR(30) )GO INSERT INTO CeshiSELECT NEWID(),'jack1' UNIONSELECT NEWID(),'jack2' UNIONSELECT NEWID(

  • jquery+ajax+text文本框实现智能提示完整实例

    本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord

  • 两种方法实现文本框输入内容提示消失

    第一种方法: 基于HTML5 input标签的新特性 - placeholder .另外,x-webkit-speech 属性可以实现语音输入功能. 复制代码 代码如下: <div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-webkit-spe

  • Jquery多选框互相内容交换的实例代码

    复制代码 代码如下: <head runat="server">    <title>无标题页</title>    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>    <script type="text/javascript">        $(docume

  • js文本框输入内容智能提示效果

    本文实例讲述了js文本框输入内容智能提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式. 具体代码如下: <!DOCTYP

  • 使用Ajax模仿百度搜索框的自动提示功能实例

    啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page

  • Android自动文本框输入识别提示功能代码

    自动提示文本框(AutoCompleteTextView)可以加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 相信大家都熟悉自动识别提示吧,在我们的生活中随处可见,今天就让我为大家简单介绍一下它是如何设计的. 所谓自动识别输入即是根据用户输入的已有信息,为用户提示可能的值,方便用户完成输入.在Android设备上这种功能分为:AutoCompleteTextView和MultiAutoCompleteTextView,前者为单个的自动识别,类似与搜索引擎的输入框提示:后者为多个值

  • jQuery简单实现点击文本框复制内容到剪贴板上的方法

    本文实例讲述了jQuery简单实现点击文本框复制内容到剪贴板上的方法.分享给大家供大家参考,具体如下: //点击文本框复制其内容到剪贴板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); alert("已经成功复制到剪帖板上!"); } e

  • jQuery简单实现input文本框内灰色提示文本效果的方法

    本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun

  • jQuery+php实时获取及响应文本框输入内容的方法

    本文实例讲述了jQuery+php实时获取及响应文本框输入内容的方法.分享给大家供大家参考,具体如下: 该程序能够查出可用余额: HTML部分: <input type="text" name="username" id="username" onkeyup="search_func(this.value);" /> <em id="mfee"></em> jquery部

随机推荐