52,782
社区成员
发帖
与我相关
我的任务
分享请教 ajax实现google自动完成功能的下拉框问题？
#search_suggest{
position: relative;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
/*left: 1px;
top: 0px;*/
height: 60px;
width: 213px;
display:none;
}
自动完成功能基本上实现了，是用<div id="search_suggest" ></div>现实列表值的，但是这个position: relative;可以精确定位，但是这样列表框就不是显示在最上面的，
每当显示值的时候，就会把页面弄乱，不知道该如何解决？
还有如何实现键盘方向键和回车选定功能，恳请各位指教？谢谢
...全文
请发表友善的回复…
发表回复
diven_net 2009-05-13
- 打赏
- 举报
嘿嘿，百度快照还不会用
lishuiqing 2009-04-21
- 打赏
- 举报
关于你说的那个上选，下选的键盘事件，我刚才的项目中用了一个普通js写的，和你的要求符合。
下面是百度快照的地址，我公司里面上不了外网，只可以看快照，给你发个。保证是你要的。
http://cache.baidu.com/c?m=9d78d513d9921ffc19ac837f7d01d0120e55f0307b8a9644228bd116c4220c550026bdb47d645646c4c40f7a1cff1701bfe73605370422b5da809f4aaaeacf7732cf3a6b671bf212508d4eb29806749b7bd40da8b219e5b8f52f95a8d2d6c8542490155a24&p=8b2a9213808411a05cfce62350&user=baidu
下面是百度快照的地址，我公司里面上不了外网，只可以看快照，给你发个。保证是你要的。
http://cache.baidu.com/c?m=9d78d513d9921ffc19ac837f7d01d0120e55f0307b8a9644228bd116c4220c550026bdb47d645646c4c40f7a1cff1701bfe73605370422b5da809f4aaaeacf7732cf3a6b671bf212508d4eb29806749b7bd40da8b219e5b8f52f95a8d2d6c8542490155a24&p=8b2a9213808411a05cfce62350&user=baidu
lishuiqing 2009-04-21
- 打赏
- 举报
jquery有一个实现了的插件，jquery.Suggest.js
你搜索这个就可以了！
你搜索这个就可以了！
sohighthesky 2009-04-21
- 打赏
- 举报
只能用绝对定位的，让这个层始终在别的元素上面，也不会影响别的元素
sohighthesky 2009-04-21
- 打赏
- 举报
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<style type="text/css">
#dSuggest {
z-index:0;
position:absolute;
background-color:#ffffff;
}
#sug {
list-style:none;
border:solid 1px #09f;
margin-left:0;
margin-top:0;
width:300px;
padding-left:0;/*添加此项，修改在FF中的样式*/
}
#sug li {
width:100%;
padding-left:2px;
margin-left:2px;
}
#sug span {
position:absolute;
z-index:200;
right:3px;
}
.select {
background-color:#09f;
color:#ffffff;
cursor:default;
}
</style>
<script type="text/javascript">
var XMLHttp=false;
var j=-1;
function CreateXMLHttpRequest() {
if(window.ActiveXObject)
{
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
XMLHttp = new XMLHttpRequest();
}
if(!XMLHttp && typeof XMLHttpRequest != 'undefined') {
XMLHttp = new XMLHttpRequest();
}
}
function GetSuggest(keyword,e) {
var keyc=GetKeyCode(e);
if(keyc==40 || keyc==38 || keyc==13)
return;
var _url="Search.ashx?keyword="+escape(keyword);
CreateXMLHttpRequest();
XMLHttp.onreadystatechange=function(){
if(XMLHttp.readyState==4) {
if(XMLHttp.status==200) {
$("dSuggest").innerHTML=XMLHttp.responseText;
// var obj=XMLHttp.responseXML.documentElement;
// alert(obj.childNodes[1].childNodes[0].nodeValue);
// var obj2=XMLHttp.responseXML;//这种写法不支持FF
// alert(obj2.childNodes[1].childNodes[0].childNodes[0].nodeValue);
j=-1;
}
}
}
XMLHttp.open("get",_url,true);
XMLHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XMLHttp.send(null);
}
function set_style(num) {//设置样式
for(var i=0;i<$$().length;i++) {
if(i>=0 && i<$$().length&&i==num) {
$$()[i].className="select";
}
else
{
$$()[i].className="";
}
}
}
function mo(nodevalue) {
j=nodevalue;
set_style(j);
}
function form_submit() {
var lis=$$();
if(lis==null)
return;
for(var i=0;i<lis.length;i++) {
if(lis[i].className=="select") {
var key=lis[i].innerHTML.substring(0,lis[i].innerHTML.toUpperCase().indexOf("<SPAN>"));
$('txtKeyword').value=key;
$("dSuggest").innerHTML="";
}
}
}
function updown(e) {
var keyc=GetKeyCode(e);
if(keyc==40 || keyc==38) {
if($$()==null)
return;
if(keyc==40) {
j++;
if(j>=$$().length)
{
j=0;
}
} else if(keyc==38) {
j--;
if(j==-1)
j=$$().length-1;
}
set_style(j);
}
}
function GetKeyCode(e) {//取得不同浏览器下的键盘事件值
var keyc;
if(window.event) {//ie键盘事件
keyc=e.keyCode;
} else if (e.which) {//火狐
keyc=e.which;
}
return keyc;
}
function $(id) {
return document.getElementById(id);
}
function $$() {
var ul=$("sug");
if(ul==null)
return null;
return ul.getElementsByTagName("li");
}
//getPos(this,'Left'),getPos(this,'Top')+this.offsetHeight
function getPos(el,sProp) {
var iPos = 0;
while (el!=null) {
iPos+=el["offset" + sProp];
el = el.offsetParent;
}
return iPos;
}
function setPosition(obj) {
$('dSuggest').style.left=getPos(obj,'Left');
$('dSuggest').style.top=getPos(obj,'Top')+obj.offsetHeight
}
</script>
<style type="text/css">
</style>
</head>
<body onload="setPosition($('txtKeyword'))">
<form id="form1" runat="server" onkeypress="if(GetKeyCode(event)==13){return false;}">
<div>
<input type="text" onkeydown="if(GetKeyCode(event)==13)form_submit()" onkeyup="GetSuggest(this.value,event);updown(event)" autocomplete="off" id="txtKeyword" />
<div id="dSuggest"></div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
diven_net 2009-04-20
- 打赏
- 举报
我觉得用css定位是搞不定的，要用JS来定位，我找找资料吧，有朋友会的麻烦帖个代码，谢谢
aokihu 2009-04-19
- 打赏
- 举报
不是什么都用css能够解决的，试试用js来绝对定位，你看看google的代码会发现，它css不多，而js比较多，里面很多是定位代码
diven_net 2009-04-19
- 打赏
- 举报
#search_suggest{
position: relative;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
/*left: 1px;
top: 0px;*/
height: 60px;
width: 213px;
display:none;
z-index:1;
}
请问是这里加 z-index:1; 吗？还是不行，没有显示在顶层
wlkjhxd 2009-04-19
- 打赏
- 举报
加上z-index:1;
diven_net 2009-04-19
- 打赏
- 举报
自己顶一下、、、、
