读书人

文本框智能提示效果

发布时间: 2012-05-06 16:15:43 作者: rapoo

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

现在我做出来的效果是:

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


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


但是,我自己做出来的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: <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();    }    public static IList<ACSClass> GetACSClassList()    {        string sql = "SELECT ClassCode, ClassName FROM ACS_Class";        List<ACSClass> list = new List<ACSClass>();        using (DataTable table = DBHelper.GetDataSet(sql))        {            foreach (DataRow row in table.Rows)            {                ACSClass acs = new ACSClass();                acs.Classcode = (string)row["ClassCode"];                acs.Classname = (string)row["ClassName"];                list.Add(acs);            }            return list;        }    }} 



谁帮我修改下,做了几个小时没达到效果。

[解决办法]
查询表的所有数据再匹配?

直接like
[解决办法]
ajax传过去

[解决办法]

[解决办法]
我开始还想,精确查询都数据量大,改成模糊查询,那不更大

后来一看你做法,就明白了,你是页面加载的时候就把所有的数据都捞下来,这样肯定慢

试试ajax吧,在用户输入的时候,把用户的输入做法参数,传到ashx页面,由ashx页面查询数据库,然后返回相应格式的数据回来
[解决办法]

[解决办法]
那要看你的js是在文本框的申明事件下触发的

[解决办法]
我昨天也在研究Jquery UI 也搞了这个 只是没几个字段数据连在一起了 呵呵 用Ajax控件好实现些
[解决办法]
楼主可以把解决方法贴出来么 ?
我也想做类似的功能
[解决办法]
就是百度搜索的智能提示一下~
最好英文,中文都可以提示
[解决办法]
这样的功能还是用Ajax比较好.
[解决办法]
把那三个jquey引用文件给我发一份,我找找原因,邮箱:331662957@qq.com
[解决办法]
让我们看看解决方法!
[解决办法]
探讨
就是百度搜索的智能提示一下~
最好英文,中文都可以提示

[解决办法]
探讨

自己解决了。

[解决办法]
接分
[解决办法]
jquery autocomplete
[解决办法]
jquery autocomplete
[解决办法]
C# code
[color=#FF0000]string[/color] str = "[";[color=#FF0000]str.ToString();[/color] 

读书人网 >asp.net

热点推荐