文本框智能提示效果-ASP.NET教程-爱易网页

文本框智能提示效果

日期：2014-05-17　浏览次数：20443 次

【高分】求一个文本框智能提示效果。
文本框需要边输入边搜索边智能提示。

现在我做出来的效果是：

输入一个值后，出现智能提示，是由数据库获取，由几个字段拼起来的。

点击智能提示，不同的字段分别到不同的文本框去。

但是，我自己做出来的BUG是，数据源我是查询表的所有数据再匹配的，但是如果数据量非常大，那么就很慢了！

我希望在原有的基础上增加边输入的时候根据文本框的值模糊查询。

1：index.aspx

HTML code



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

<!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>
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
     <link rel="Stylesheet" href="js/jquery.autocomplete.css" />
     <script type="text/javascript">
         var emails=<%=tip%>; 
             $(function() {
                 $('#keyword').autocomplete(emails, {
                     max:10,    //列表里的条目数
                     minChars: 0,    //自动完成激活之前填入的最小字符
                     width: 400,     //提示的宽度，溢出隐藏
                     scrollHeight: 300,   //提示的高度，溢出显示滚动条
                     matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                     autoFill: false,    //自动填充
                     //提示
                     formatItem: function(row, i, max) {
                         return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                     },
                     //匹配
                     formatMatch: function(row, i, max) {
                         return row.name + row.to;
                     },
                     //结果
                     formatResult: function(row) {
                         return row.name;
                     }
                 }).result(function(event, row, formatted) {
                 document.getElementById("keyword2").value=row.to;                     
                 });
             });
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Name:&nbsp;<asp:TextBox ID="keyword" runat="server"></asp:TextBox><br />
        Email: <asp:TextBox ID="keyword2" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

2：index.aspx.cs

C# code


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;
using System.Collections.Generic;
using System.Data.SqlClient;

public partial class index : System.Web.UI.Page
{
    public string tip = "";
    protected void Page_Load(object sender, EventArgs e)
    {
            IList<ACSClass> list = GetACSClassList();
            string str = "[";
            for (int i = 0; i < list.Count; i++)
            {
                ACSClass acsclass = (ACSClass)list[i];
                str += "{name:'" + acsclass.Classcode + "',to:'" + acsclass.Classname + "'},"; 
            }
            str = str.Substring(0, str.Length - 1);//去掉最后一个逗号   
            str += "]";
            tip = str.ToString();
    }

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

文本框智能提示效果

相关资料更多>

推荐阅读更多>