Ajax 实现类似谷歌文本框！大家帮帮我！
大虾们好！
小弟又问问题了！
我想实现类似谷歌搜索一样的智能提示！
其实我问题不是核心技术
而是它的那个提示框是怎么实现的？
我只知道那是一个texearea 但是不知道怎么用css把它变成那种效果，，就是一输入关键字出现的那个下拉框的那种效果！
、由于我的css了解太少！ 希望大家帮帮忙吧
如果大虾们有现成的代码愿意给我看的话 麻烦发到 x5201314x@vip.qq.com
小弟先谢谢了！
[解决办法]
看看我收藏这个
[code=HTML]<HTML>
<HEAD>
<TITLE>AutoComplete</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
** ==================================================================================================
** ClassName ：CLASS_AUTOCOMPLETE
** Intro ：a control similar IE Address Bar
** Example ：
Ver ： 0.31
---------------------------------------------------------------
nick：<INPUT size=30 name=q autolist='ba|ttyp|"|tt|typ|中国上海市|www.baidu.com|www.google.con|jimao8|中国|中|中国上海'>
<SCRIPT LANGUAGE="JavaScript">
<!--
var acbar = new CLASS_AUOTCOMPLETE();
acbar.setup(document.all.q);
//-->
< /SCRIPT>
---------------------------------------------------------------
** Author ：ttyp
** Email ：ttyp@21cn.com
** Date ：2006-12-25
** ==================================================================================================
**/
function CLASS_AUOTCOMPLETE(ID){
var me = this;
this.contain = document.getElementById("__auto_complete_contain");
this.handle = null;
this.dropdown = false;
this.stopChange = false;
this.line = 0;
this.selectIndex = -1;
this.id = "";
if(ID!=null&&typeof(ID)!=undefined){
this.id = ID;
}else{
this.id = getNewId();
}
function getNewId(){
return "ID_" + Math.random().toString().substring(2)
}
this.add = function(s){
this.list[this.list.length] = s;
}
this.sort = function(){
//sort
shellSort(this.list);
}
this.show = function(flag){
var contain = me.contain;
if(contain==null||typeof(contain)=="undefined"){
contain = document.createElement("div");
var body = document.body;
if(typeof(body)!="undefined"){
body.appendChild(contain);
}
me.contain = contain;
}
if(flag==undefined||flag==null){
flag = true;
}
if(flag){
var w=1000,h=50,l,t;
me.line = 0;
if(me.handle!=null&&typeof(me.handle)!="undefined"){
var v = me.handle.value;
if(me.list!=null&&typeof(me.list)!="undefined"){
for(var i=contain.childNodes.length-1;i>=0;i--){
contain.removeChild(contain.childNodes[i]);
}
var index = 0;
for(var i=0;i<me.list.length;i++){
if(me.list[i].indexOf(v)==0){
var oo = document.createElement("div");
contain.appendChild(oo);
oo.innerText = me.list[i];
oo.style.height = "16px";
oo.style.width = "100%";
oo.style.overflow="hidden";
oo.style.lineHeight="120%";
oo.style.cursor = "hand";
oo.style.fontSize = "9pt";
oo.style.padding = "0 2 0 2";
oo.setAttribute("accoc",me.id + "__auto_complete_contain");
oo.setAttribute("sIndex",index);
oo.onmouseover = function(){
this.style.background = "highlight";
this.style.color = "highlighttext";
if(me.selectIndex>=0&&me.selectIndex!=this.getAttribute("sIndex")*1){
var oc = me.contain.childNodes[me.selectIndex];
oc.style.background = "#ffffff";
oc.style.color = "#000000";
}
me.selectIndex = this.getAttribute("sIndex")*1;
}
oo.onmouseout = function(){
this.style.background = "#ffffff";
this.style.color = "#000000";
}
oo.onclick=function(){
me.stopChange = true;
me.handle.value = this.innerText;
me.stopChange = false;
me.show(false);
var r =me.handle.createTextRange();
r.moveStart('character',me.handle.value.length);
r.collapse(true);
r.select();
me.handle.focus();
me.selectIndex = -1;
}
oo.onfocus = function(){ me.handle.focus();}
oo.onblur = me.handle.onblur;
oo.onselectstart = function(){return false;};
me.line++;
index++;
}
}
}
w = me.handle.getBoundingClientRect().right - me.handle.getBoundingClientRect().left;
l = me.handle.getBoundingClientRect().left-2;
t = me.handle.getBoundingClientRect().bottom-2;
}
h = (me.line>6?6*16:me.line*16)+2;
contain.style.position = "absolute";
contain.style.top = t;
contain.style.left = l;
contain.style.width = w;
contain.style.height = h;
contain.style.overflowY = "auto";
contain.style.overflowX = "hidden";
contain.style.backgroundColor = "#ffffff";
contain.style.border = "1px solid black";
contain.setAttribute("accoc",me.id + "__auto_complete_contain");
contain.onblur = me.handle.onblur;
contain.onselectstart = function(){return false;}
contain.onfocus = function(){ me.handle.focus();}
if(me.line<=0){
contain.style.display = "none";
}else{
contain.style.display = "";
}
}else{
contain.style.display = "none";
}
this.dropdown = flag;
}
this.filter = function(){
this.show();
}
code]
[解决办法]
一定要mark
[解决办法]
原理是创建一个绝对定位的层,然后取当前input的坐标,层里面的事情就很简单了.
[解决办法]
建议楼主去看看 Ajax in Action 这本书，有中文版的，里面有详细的介绍。
