如果做一个类似与Google suggest的搜索框,要求是自动提示信息是由数据库读取的(请高人解答,狂送分)

AJAX
AutoCompleteExtender控件!!
公司要求不用webservers ???????
为什么 ???????????????????/
用webservers 数据库内容写里面不是一样

用JavaScript + AJAX 可以实现。

===========cs============= [Ajax.AjaxMethod()]
    public ArrayList GetSearhItmes(string str)
    {
        ArrayList itmes = new ArrayList();        OABase.Base.DBObject _dbo = new OABase.Base.DBObject();
        _dbo.SqlComm = string.Format("select Alias from tblEmployee where charindex('{0}',lower(Alias)) = 1", str);        // string.Format(string format,object arg0); 把 arg0 替换到 fomat 中的指定位置‘{0}’,
        // charindex(string1,string2) 查找 string1 在 string2 中第一次出现的位置
        // lower(string) 将 string 转换成小写字符
        DataTable dt = _dbo.GetDataTable();        foreach( DataRow dr in dt.Rows)
        {
            itmes.Add(dr[0]);
        }
        return itmes;
    }
=========page===============<script language="javascript" src="lookup.js" type="text/javascript"></script><script language="jscript" type="text/javascript">
        mainLoop = function()
        {
            val = escape(queryField.value);
            if (lastVal != val)
            {
                var response = Ajax_UserReg_UserTip.GetSearhItmes(val);
                showQueryDiv(response.value);

                lastVal = val;
            }
            setTimeout('mainLoop()', 100);
            return true;
        }
</script>
<hr />
<asp:Label ID="Label2" runat="server">请输入姓名：</asp:Label>
<input name="search" type="text" id="search" autocomplete="off" /><script language="javascript" type="text/javascript">window.oninit=InitQueryCode("search","querydiv");</script>=========lookup.js=================// JScript File// 下拉区背景色
var DIV_BG_COLOR = "#EEE";// 高亮显示条目颜色
var DIV_HIGHLIGHT_COLOR = "#C30";// 字体
var DIV_FONT = "Arial";// 下拉区内补丁大小
var DIV_PADDING = "2px";// 下拉区边框样式
var DIV_BORDER = "1px solid #CCC"; // 文本输入框
var queryField;// 下拉区ID
var divName;// IFrame名称
var ifName;// 记录上次选择的值
var lastVal = "";// 当前选择的值
var val = "";// 显示结果的下拉区
var globalDiv;// 下拉区是否设置格式的标记
var divFormatted = false;/**
InitQueryCode函数必须在<body onload>事件的响应函数中调用，其中：
queryFieldName为文本框控件的ID，
hiddenDivName为显示下拉区div的ID
*/
function InitQueryCode(queryFieldName, hiddenDivName)
{
   // 指定文本输入框的onblur和onkeydown响应函数
    queryField = document.getElementById(queryFieldName);
    queryField.onblur = hideDiv;
    queryField.onkeydown = keypressHandler;    // 设置queryField的autocomplete属性为"off"
    queryField.autocomplete = "off";    // 如果没有指定hiddenDivName，取默认值"querydiv"
    if (hiddenDivName)
    {
        divName = hiddenDivName;
    }
    else
    {
        divName = "querydiv";
    }   // IFrame的name
    ifName = "queryiframe";   // 100ms后调用mainLoop函数
    setTimeout("mainLoop()", 100);
}

/**
获取下拉区的div,如果没有则创建之
*/
function getDiv (divID)
{
    if (!globalDiv)
    {
        // 如果div在页面中不存在，创建一个新的div
        if (!document.getElementById(divID))
        {
            var newNode = document.createElement("div");
            newNode.setAttribute("id", divID);
            document.body.appendChild(newNode);
        }        // globalDiv设置为div的引用
        globalDiv = document.getElementById(divID);
        // 计算div左上角的位置
        var x = queryField.offsetLeft;
        var y = queryField.offsetTop + queryField.offsetHeight;
        var parent = queryField;
        while (parent.offsetParent)
        {
            parent = parent.offsetParent;
            x += parent.offsetLeft;
            y += parent.offsetTop;
        }        // 如果没有对div设置格式，则为其设置相应的显示样式
        if (!divFormatted)
        {
            globalDiv.style.backgroundColor = DIV_BG_COLOR;
            //globalDiv.style.fontFamily = DIV_FONT;
            globalDiv.style.padding = DIV_PADDING;
            globalDiv.style.border = DIV_BORDER;
            globalDiv.style.width = "100px";
            globalDiv.style.fontSize = "10px";            globalDiv.style.position = "absolute";
            globalDiv.style.left = x + "px";
            globalDiv.style.top = y + "px";
            globalDiv.style.visibility = "hidden";
            globalDiv.style.zIndex = 10000;            divFormatted = true;
        }
    }    return globalDiv;
}/**
根据返回的结果集显示下拉区
*/
function showQueryDiv(resultArray)
{
   // 获取div的引用
    var div = getDiv(divName);

    // 如果div中有内容，则删除之
    while (div.childNodes.length > 0)
        div.removeChild(div.childNodes[0]);        // 依次添加结果
        for (var i = 0; i < resultArray.length; i++)
        {
           // 每一个结果也是一个div
            var result = document.createElement("div");
            // 设置结果div的显示样式
            result.style.cursor = "pointer";
            result.style.padding = "2px 0px 2px 0px";
            // 设置为未选中
            _unhighlightResult(result);

            // 设置鼠标移进、移出等事件响应函数
            result.onmousedown = selectResult;
            result.onmouseover = highlightResult;
            result.onmouseout = unhighlightResult;
            // 结果的文本是一个span
            var result1 = document.createElement("span");
            // 设置文本span的显示样式
            result1.className = "result1";
            result1.style.textAlign = "left";
            result1.style.fontWeight = "bold";
            result1.innerHTML = resultArray[i];

            // 将span添加为结果div的子节点
            result.appendChild(result1);

            // 将结果div添加为下拉区的子节点
            div.appendChild(result);
        }        // 如果结果集不为空，则显示，否则不显示
        showDiv(resultArray.length > 0);}/**
用户单击某个结果时，将文本框的内容替换为结果的文本，
并隐藏下拉区
*/
function selectResult()
{
    _selectResult(this);
}// 选择一个条目
function _selectResult(item)
{
    var spans = item.getElementsByTagName("span");
    if (spans)
    {
        for (var i = 0; i < spans.length; i++)
        {
            if (spans[i].className == "result1")
            {
                queryField.value = spans[i].innerHTML;
                lastVal = val = escape(queryField.value);
                mainLoop();
                queryField.focus();
                showDiv(false);
                return;
            }
        }
    }
}/**
当鼠标移到某个条目之上时，高亮显示该条目
*/
function highlightResult()
{
    _highlightResult(this);
}function _highlightResult(item)
{
    item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
}/**
当鼠标移出某个条目时，正常显示该条目
*/
function unhighlightResult()
{
    _unhighlightResult(this);
}function _unhighlightResult(item)
{
    item.style.backgroundColor = DIV_BG_COLOR;
}/**
显示/不显示下拉区
*/
function showDiv (show)
{
    var div = getDiv(divName);
    if (show)
    {
        div.style.visibility = "visible";
    }
    else
    {
        div.style.visibility = "hidden";
    }
    adjustiFrame();
}/**
隐藏下拉区
*/
function hideDiv ()
{
    showDiv(false);
}/**
调整IFrame的位置，这是为了解决div可能会显示在输入框后面的问题
*/
function adjustiFrame()
{
    // 如果没有IFrame，则创建
    if (!document.getElementById(ifName))
    {
        var newNode = document.createElement("iFrame");
        newNode.setAttribute("id", ifName);
        newNode.setAttribute("src", "javascript:false;");
        newNode.setAttribute("scrolling", "no");
        newNode.setAttribute("frameborder", "0");
        document.body.appendChild(newNode);
    }    iFrameDiv = document.getElementById(ifName);
    var div = getDiv(divName);    // 调整IFrame的位置与div重合，并在div的下一层
    try
    {
        iFrameDiv.style.position = "absolute";
        iFrameDiv.style.width = div.offsetWidth;
        iFrameDiv.style.height = div.offsetHeight;
        iFrameDiv.style.top = div.style.top;
        iFrameDiv.style.left = div.style.left;
        iFrameDiv.style.zIndex = div.style.zIndex - 1;
        iFrameDiv.style.visibility = div.style.visibility;
    }
    catch (e)
    {
    }
}/**
文本输入框的onkeydown响应函数
*/
function keypressHandler (evt)
{
    // 获取对下拉区的引用
    var div = getDiv(divName);   // 如果下拉区不显示，则什么也不做
    if (div.style.visibility == "hidden")
    {
        return true;
    }    // 确保evt是一个有效的事件
    if (!evt && window.event)
    {
        evt = window.event;
    }
    var key = evt.keyCode;    var KEYUP = 38;
    var KEYDOWN = 40;
    var KEYENTER = 13;
    var KEYTAB = 9;

    // 只处理上下键、回车键和Tab键的响应
    if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
    {
        return true;
    }    var selNum = getSelectedSpanNum(div);
    var selSpan = setSelectedSpan(div, selNum);

    // 如果键入回车和Tab，则选择当前选择条目
    if ((key == KEYENTER) || (key == KEYTAB))
    {
        if (selSpan)
        {
            _selectResult(selSpan);
       }
        evt.cancelBubble = true;
        return false;
    }
    else //如果键入上下键，则上下移动选中条目
    {
        if (key == KEYUP)
        {
            selSpan = setSelectedSpan(div, selNum - 1);
        }
        if (key == KEYDOWN)
        {
            selSpan = setSelectedSpan(div, selNum + 1);
        }
        if (selSpan)
        {
            _highlightResult(selSpan);
        }
    }    // 显示下拉区
    showDiv(true);
    return true;
}/**
获取当前选中的条目的序号
*/
function getSelectedSpanNum(div)
{
    var count = -1;
    var spans = div.getElementsByTagName("div");
    if (spans)
    {
        for (var i = 0; i < spans.length; i++)
        {
            count++;
            if (spans[i].style.backgroundColor != div.style.backgroundColor)
            {
                return count;
            }
        }
    }   return -1;
}/**
选择指定序号的结果条目
*/
function setSelectedSpan(div, spanNum)
{
    var count = -1;
    var thisSpan;
    var spans = div.getElementsByTagName("div");
    if (spans)
    {
        for (var i = 0; i < spans.length; i++)
        {
            if (++count == spanNum)
            {
                _highlightResult(spans[i]);
                thisSpan = spans[i];
            }
            else
            {
               _unhighlightResult(spans[i]);
           }
       }
    }
   return thisSpan;
}

直接用ASP.NET AJAX Control Toolkit的AutoCompleteExtender吧。

实在不好意思上周2天都比较忙现在给大家送分顺便说一下为什么不用AutoCompleteExtender因为不支持中文提示。。至少我调不出来还蛮 = =#的

十分感谢EricGuzuqiang的回答先测试一下，这几天太忙了还有就是为什么不能用webserver原因可能是我们老大有他自己的想法把没办法，我只能忍了。。

刚刚测试完EricGuzuqiang的代码，发现如下问题，望指教1.//[Ajax.AjaxMethod()] 里面的
public ArrayList GetSearhItmes(string str) 这个函数肯定是要调用的把，参数怎么写呢，难道是SQL语句的字符串？还有调用的时候肯定是pagaLoad里面的把，所以参数方面望指教，另外这个OABase.Base.DBObject 要引用什么命名空间。。
本人新手希望指出...2.关于JS方面，InitQueryCode(queryFieldName, hiddenDivName) 这个function说是在body里面调用，但是参数方面怎么写，因为有个getdiv（）这个函数，就是说我不用指定div的ID，但是InitQueryCode（）这个里面的div的参数我该怎么处理呢
是不是在body结尾前的<script language="javascript" type="text/javascript" >window.oninit=InitQueryCode("search","querydiv"); </script >
控制body onload3.也是关于JS方面的，就是鼠标和键盘事件我该如何调用，由于没有用过，望指出。
写在最后，如果有源码可以调式通过的话（请一定要支持中文自动提示！），请放出，感激不尽！

前台
<asp:ScriptManager ID="ScriptManager1" runat="server" >
             </asp:ScriptManager >
             <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
        TargetControlID="TextBox1"
        CompletionSetCount="12"
        EnableCaching="true"
        MinimumPrefixLength="1"
        ServicePath="sql_test.asmx"
       CompletionListElementID="Panel1"
        ServiceMethod="GetCompleteList" >
             </ajaxToolkit:AutoCompleteExtender >
         </div >
         
         <asp:TextBox ID="TextBox1" runat="server" ForeColor="Black" > </asp:TextBox > sql_test.asmx的代码 using System;
using System.Web.Services;
using System.Collections.Generic;
using System.Data.SqlClient;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class sql_test : System.Web.Services.WebService {     public sql_test () {         //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }     [WebMethod]
    public string[] GetCompleteList(string prefixText, int count)
    {
        List <string > items = new List <string >(count);//泛型
        SqlConnection myCon = new SqlConnection("Server=AAAA;uid=sa;pwd=TTiger;Database=kmjxc_08_test");//数据库连接
        myCon.Open();//打开数据库连接
        SqlCommand myCmd = new SqlCommand("select top " + count + " username from user_item where username like  '" + prefixText + "% 'group by username order by username ", myCon);
        SqlDataReader myDR = myCmd.ExecuteReader();
        while (myDR.Read())
        {
            items.Add(myDR["username"].ToString());
        }
        myCon.Close();//关闭数据库连接
        return items.ToArray();
    }

}
完整的代码 ........一个都没漏............

楼上的这个AutoComplate控件方法直接就让我老大PASS掉了还是谢了
原因是不支持中文

public ArrayList GetSearhItmes(string str)
    {
        ArrayList itmes = new ArrayList();         OABase.Base.DBObject _dbo = new OABase.Base.DBObject();
        _dbo.SqlComm = string.Format("select Alias from tblEmployee where charindex( '{0} ',lower(Alias)) = 1", str);         // string.Format(string format,object arg0); 把 arg0 替换到 fomat 中的指定位置‘{0}’,
        // charindex(string1,string2) 查找 string1 在 string2 中第一次出现的位置
        // lower(string) 将 string 转换成小写字符
        DataTable dt = _dbo.GetDataTable();         foreach( DataRow dr in dt.Rows)
        {
            itmes.Add(dr[0]);
        }
        return itmes;
    }
这是一个ajax方法
参数str就是当前输入框的内容OABase.Base.DBObject _dbo = new OABase.Base.DBObject();
        _dbo.SqlComm = string.Format("select Alias from tblEmployee where charindex( '{0} ',lower(Alias)) = 1", str);
这一段是将数据库中匹配的内容提取出来放在一个dt中   这里当然要换成泥自己的代码

“还有调用的时候肯定是pagaLoad里面的把”这是ajax方法被js调用的而不是在pageload里调用

<input name="search" type="text" id="search" autocomplete="off" / > <script language="javascript" type="text/javascript" >window.oninit=InitQueryCode("search","querydiv"); </script >
InitQueryCode参数就两个 search是那个input的id, querydiv是lookup.js中默认的一个div的idlookup.js中的内容不需要任何修改

最后键盘事件在该程序中没有调用而是用的定时调用定时检测input中的内容

AutoComplate控件是支持中文的，我前几天也在论坛里发贴子做的这个功能，贴子地址如下：
http://topic.csdn.net/u/20071016/13/a10ef5df-3ee7-4f35-8366-c6f1eeb414a2.html既然楼主说不可以用这种方法，我也学习一下JS的写法

谢谢EricGuzuqiang 兄[Ajax.AjaxMethod()]这个在调试中提示我缺少命名空间我用的是VS2005。。难道？？

我晕死了难道要建一个AJAXEnabledWebSite？？我一开始建的是WebSite

直接website就行乐在网上下一个ajax.dll 然后添加引用到你的site中就行啦

还是不行引用的dll全名是什么？？在什么地方？
请详细说下。。不会要去网站上面下把

概念 ,和技术都是很清晰的呵呵
不过
你要看你WEB服务器反映的速度了
没有流畅感
这个还是不做的好
我认为
EricGuzuqiang
的例子应该够用了吧
用ATLAS也很容易实现
最应该注意的的是客户的角度

ajax.dll下了但是出现老问题找不到命名空间"OABase"汗~~一直都是用的SQL 其他数据库全部没连过~~

OABase是我自己的一个类你当然不能用了把这段代码都改成你自己的

OABase.Base.DBObject _dbo = new OABase.Base.DBObject();
        _dbo.SqlComm = string.Format("select Alias from tblEmployee where charindex( '{0} ',lower(Alias)) = 1", str);         // string.Format(string format,object arg0); 把 arg0 替换到 fomat 中的指定位置‘{0}’,
        // charindex(string1,string2) 查找 string1 在 string2 中第一次出现的位置
        // lower(string) 将 string 转换成小写字符
        DataTable dt = _dbo.GetDataTable(); 这段代码的意思就是从数据库中选出跟当前input框中内容相匹配的所有记录，然后将这个纪录存在dt里面这里你需要改成自己的方法

我的page里面  body是这样的
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label ID="Label2" runat="server" >请输入姓名： </asp:Label >
    <input name="search" type="text" id="search" autocomplete="off" /  >
    <script language="javascript" type="text/javascript"  >window.oninit=InitQueryCode("search","querydiv"); </script  >
    </div>
    </form>
</body>但是调试时候居然会报脚本错误，说是无效字符,行322我看了一下lookup.js的322是 // 如果键入回车和Tab，则选择当前选择条目
    if ((key == KEYENTER)  ¦ ¦ (key == KEYTAB))
    {
        if (selSpan)
        {
            _selectResult(selSpan);
       }
        evt.cancelBubble = true;
        return false;
    }

整个page<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script language="javascript" src="lookup.js" type="text/javascript" > </script >
    <script language="jscript" type="text/javascript" >
    mainLoop = function()
    {
        val = escape(queryField.value);
        if (lastVal != val)
        {
            var response = Ajax_UserReg_UserTip.GetSearhItmes(val);
            showQueryDiv(response.value);

            lastVal = val;
        }
        setTimeout( 'mainLoop() ', 100);
        return true;
    }
    </script >
</head><body>
    <form id="form1" runat="server">
    <div>
    <asp:Label ID="Label2" runat="server" >请输入姓名： </asp:Label >
    <input name="search" type="text" id="search" autocomplete="off" /  >
    </div>
    <script language="javascript" type="text/javascript">window.oninit=InitQueryCode("search","querydiv");</script>
    </form>
</body>
</html>
看了一下绝对没问题啊

[Ajax.AjaxMethod()]
    public ArrayList GetSearhItmes(string str)
    {
        ArrayList itmes = new ArrayList();        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ToString());
        conn.Open();
        SqlDataAdapter da = new SqlDataAdapter("select P_ProvinceName from Province where P_ProvinceName like'" + str + "%'order by P_ProvinceName", conn);
        DataSet ds = new DataSet();
        da.Fill(ds);        //OABase.Base.DBObject _dbo = new OABase.Base.DBObject();
        //_dbo.SqlComm = string.Format("select P_ProvinceName from Province where charindex( '{0} ',lower(P_ProvinceName)) = 1", str);        //// string.Format(string format,object arg0); 把 arg0 替换到 fomat 中的指定位置‘{0}’,
        //// charindex(string1,string2) 查找 string1 在 string2 中第一次出现的位置
        //// lower(string) 将 string 转换成小写字符
        //DataTable dt = _dbo.GetDataTable();        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            itmes.Add(dr[0]);
        }
        return itmes;
    }
这是我CS中写的方法，修改过请也看看~~

"缺少对象"
我想是var response = Ajax_UserReg_UserTip.GetSearhItmes(val);
这句代码的问题"Ajax_UserReg_UserTip"是控件的类名

也就是说input.GetSearhItmes(val); var response = input.GetSearhItmes(val); 这个也写在lookus.js里面？

非也
建议你先在网上查查ajax.dll的用法

刚才又重新弄了一下还是JS报错没有对象<script language="javascript" type="text/javascript" >window.oninit=InitQueryCode("search","querydiv"); </script > 这一句

http://blog.csdn.net/ShowWin/archive/2007/10/30/1857035.aspx这里．.前两天写了一个

ajaxToolkit:AutoCompleteExtender 这个东西如果是页面加载光标就在文本狂中，那么他就不能调用，犯禁，要怎么改才可以使用

up up up

web service咋跟js的关系，就好象“关公战秦琼”，没有关系。

调试易

如果做一个类似与Google suggest的搜索框,要求是自动提示信息是由数据库读取的(请高人解答,狂送分)

解决方案 »