如果做一个类似与Google suggest的搜索框,要求是自动提示信息是由数据库读取的(请高人解答,狂送分)
如果做一个类似与Google suggest的搜索框,要求是自动提示信息是由数据库读取的(请高人解答,狂送分)当然还要解决中文提示的问题
我自己做拉一个调用webservers的 但是不支持中文 而且读取数据库方面一直读不出来 实在想不通
加上公司要求不用webservers
这下只有请JS帮帮忙拉
有会的兄弟请指教 --------------------编程问答-------------------- 如果有源码 请发我邮箱
kunta0514@163.com --------------------编程问答-------------------- 呵呵呵呵 我这里有 帮你找找啊 --------------------编程问答-------------------- 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 onload
3.也是关于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的id
lookup.js中的内容不需要任何修改 --------------------编程问答-------------------- 最后 键盘事件在该程序中没有调用 而是用的定时调用 定时检测input中的内容
--------------------编程问答-------------------- AutoComplate控件是支持中文的，我前几天也在论坛里发贴子做的这个功能，贴子地址如下：
http://topic.csdn.net/u/20071016/13/a10ef5df-3ee7-4f35-8366-c6f1eeb414a2.html
既然楼主说不可以用这种方法，我也学习一下JS的写法 --------------------编程问答-------------------- 谢谢EricGuzuqiang 兄
[Ajax.AjaxMethod()]
这个在调试中提示我缺少命名空间
我用的是VS2005。。
难道？？ --------------------编程问答-------------------- 那是你没引用ajax.dll --------------------编程问答-------------------- ls说的对 --------------------编程问答-------------------- 我晕死了
难道要建一个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;
}
--------------------编程问答-------------------- 另外32行说没有对象。。
是在很不明白。。
本来就对JS 不熟，只会看，复杂的完全基本自己不会写 --------------------编程问答-------------------- 整个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 >
这一句 --------------------编程问答-------------------- xuexi --------------------编程问答-------------------- http://blog.csdn.net/ShowWin/archive/2007/10/30/1857035.aspx
这里．.前两天写了一个 --------------------编程问答-------------------- 不支持中文呀 --------------------编程问答-------------------- JQuery.......... --------------------编程问答-------------------- ajaxToolkit:AutoCompleteExtender 这个东西如果是页面加载光标就在文本狂中，那么他就不能调用，犯禁，要怎么改才可以使用 --------------------编程问答--------------------
不支持中文啊~~~有没有人能帮改改的~~？？ --------------------编程问答-------------------- up up up --------------------编程问答--------------------
web service咋跟js的关系，就好象“关公战秦琼”，没有关系。 --------------------编程问答-------------------- 哇塞，挖坟贴啊！
补充：.NET技术 , ASP.NET
