【高分】求一个文本框智能提示效果。
文本框需要边输入边搜索边智能提示。
现在我做出来的效果是:
输入一个值后,出现智能提示,是由数据库获取,由几个字段拼起来的。
点击智能提示,不同的字段分别到不同的文本框去。
但是,我自己做出来的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]