读书人
栏目▼

JS效果：像百度搜索框一样在文本框中

发布时间： 2012-03-15 11:50:38 作者： rapoo

求助JS效果：像百度搜索框一样，在文本框中输入字符后，自动出现提示下拉框
这个效果我思考如下：
(1)下拉框可能用<div>来做
(2)需要与服务器实时交互，因为下拉框中出现的内容从服务器端读取的（用到AJAX）

求助较为详细的代码，谢谢了

[解决办法]
前几天才做了一个，http://www.vichy.com.cn/

JScript code
    $(".searchText").bind("keyup", function(){        if(later!=null) clearTimeout(later);        later = setTimeout(function(){            var keyword = $(".searchText").val();            if(keyword!=""){                $.get("/skin.aspx", {keywords: keyword}, function(data){                    var resHtml = "";                    if($(data).find("keyword").length > 0){                        $(data).find("keyword").each(function(index){                            resHtml += "<li onmouseover=\"rs_event.hover()\" onmouseout=\"\" onclick=\"rs_event.click('"+$(this).find("name").text()+"')\">"+$(this).find("name").text()+"</li>\n";                            });                        $(".search_complete").html("").append(resHtml).show();                        if($(data).find("keyword").length>20){                            $(".search_complete").css({height:'400px', overflowY:'auto'});                        }else{                            $(".search_complete").css({height:'auto'});                        }                    }else{                        $(".search_complete").hide();                    }                });            }else{                $(".search_complete").hide();            }        }, 800) ;            });
[解决办法]
能获取数据的话，剩下的就是定义div的显示样式而已，用css，我感觉用jquery中的ajax还是挺好用的
[解决办法]
其实网上有现成的js控件的.
我前不久也模仿的写过。
我去找找！
[解决办法]
学习下 哈！
[解决办法]
纯js写的
HTML code
<!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>Auto Complete</title>      <style type="text/css">            .hlight{background-color:Red}        .normal{backgroud-color:transparent;}        </style>    <script language="javascript" type="text/javascript" src="../../JS/jquery-1[1].3.2.min.js"></script>    <script>    function doit(evt)    {        evt = (evt) ? evt : ((window.event) ? window.event : "");        var key = evt.keyCode?evt.keyCode:evt.which;        if(key==38|key==40|key==13)return;        var wd = document.getElementById("wd").value;        if(wd.length==0)return;        $.ajax({            url:'../../Example/AutoComplete/Handler1.ashx',            type:'POST',            dataType:'json',            data: "wd="+wd,             error:function(x){alert(x.status);},            success:function(data){$("#show_wd").html(setTable(data)).show();}        });    }        //设置拼接Table    function setTable(jsn)    {        if(jsn.s.length==0|jsn.s[0]==""|jsn.s[0]=="undefined")        {            document.getElementById("show_wd").style.display="none";            return"";        }                var html ="<table id=\"tb\" width=\"100%\">";        for(var i in jsn.s)        {        html+="<tr onmouseover=\"hLight(this)\"><td onclick=\"completeField(this)\">"+jsn.s[i]+"</td></tr>";        }        html +="<tr class=\"hlight\" style=\"display:none\"><td>"+document.getElementById('wd').value+"</td></tr>";        //alert(document.getElementById('wd').value);        html +="</table>";        //setDiv();//设置DIV        //alert(html);        return html;    }    //设置DIV的位置    function setDiv()    {       var txt = document.getElementById("wd");       var tDiv = document.getElementById("show_wd");       tDiv.style.width =txt.offsetWidth; + "px";       var left = calculateOffset(txt,"offsetLeft");       var top = calculateOffset(txt, "offsetTop") + txt.offsetHeight;       tDiv.style.border = "black 1px solid";       tDiv.style.left = left + "px";       tDiv.style.top = top + "px";    }        //将该行的数据填充到文本框内    function completeField(tdvalue)    {        document.getElementById("wd").value=tdvalue.innerText;         document.getElementById("show_wd").style.display="none";    }    //计算控件相对于浏览器的位置    function calculateOffset(field, attr)    {          var offset = 0;          while(field) {            offset += field[attr];             field = field.offsetParent;          }         return offset;    }    //在输入框内点击上下回车    function KeyDown(evt)    {        evt = (evt) ? evt : ((window.event) ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象        var key = evt.keyCode?evt.keyCode:evt.which; //兼容IE和Firefox获得keyBoardEvent对象的键值        if(key==38)        {            //上            lightMove("up");        }        if(key==40)        {            //下            lightMove("down");                    }        if(key==13)        {            //回车            lightMove("ok");                    }    }        //高亮移动    function lightMove(cmd)    {        var tb = document.getElementById("tb");               if(cmd=="up")        {            //上            for(var i=0;i<tb.rows.length;i++)            {               if(tb.rows[i].className=="hlight")                {                    tb.rows[i].className="normal";                    i=i==0?tb.rows.length-1:i-1;                    tb.rows[i].className="hlight";                    sTxt(tb.childNodes[i].childNodes[0]);                }              }        }        if(cmd=="down")        {            for(var i=0;i<tb.rows.length;i++)            {               if(tb.rows[i].className=="hlight")                {                    tb.rows[i].className="normal";                    i=i==tb.rows.length-1?0:i+1;                    tb.rows[i].className="hlight";                    sTxt(tb.childNodes[i].childNodes[0]);                }              }        }        if(cmd=="ok")        {            for(var i=0;i<tb.rows.length;i++)            {               if(tb.rows[i].className=="hlight")                {                   completeField(tb.rows[i]);                }              }        }    }    //将输入的内容写进Table    function insTR(tb)    {        var new_tr = tb.insertRow(tb.rows.length);        var new_td = new_tr.insertCell();        new_td.innerText=document.getElementById("wd").value;        new_tr.style.display="none";        new_tr.className="hlight";    }    //将数值写入文本框    function sTxt(td)    {    //alert(td.innerText);        document.getElementById("wd").value=td.innerText;    }    //高亮某行    function hLight(tr)    {        var tb = document.getElementById("tb");        for(var i=0;i<tb.rows.length;i++)        {           if(tb.rows[i].className=="hlight")            {                tb.rows[i].className="normal";                break;            }          }        tr.className="hlight";    }    window.onload = function()    {        setDiv();    }        </script></head><body>    <form id="form1" runat="server">    <div>    <input id="wd" type="text" style="width: 500px" autocomplete="off" onkeypress="doit(event)"                onkeydown="KeyDown(event)" />            <div id="show_wd" style="position: absolute; font-size: 12px; display:none">            </div>    </div>    </form></body></html> 
 
[解决办法]
网上看到过一个类似百度的输入就立刻自动提示的例子，很好用！有源码下载，因为有ASP文件，所以必须在IIS环境下才能执行！
地址：http://bbs.bccn.net/thread-309800-1-1.html
[解决办法]
探讨

http://localhost:11743/Example/AutoComplete/Default.aspx

[解决办法]
百度搜索

js 自动完成

爆出一堆
[解决办法]
顶一楼的，很简洁。楼主不知道jquery的话，就在前面加个引用：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

[解决办法]
http://jqueryui.com/demos/autocomplete/

jquery ui autocomplete
[解决办法]
function smanPromptList(arrList,objInputId){ 
this.style = "background:#FFF; border:1px solid #CCCCCC;font-size:14px;cursor: default; z-index:1000;" 
if (arrList.constructor!=Array){
alert('smanPromptList初始化失败:第一个参数非数组!');
return ;
}

if(document.addEventListener){
window.addEventListener('load',bodyFunction,false);//FireFox中使用
}else{
window.attachEvent('onload',bodyFunction);//IE中使用
}

function bodyFunction(){
arrList.sort(function(a,b){ 
if(a.length>b.length)return 1; 
else if(a.length==b.length)return a.localeCompare(b); 
else return -1; 
})
 
var objouter = document.getElementById("__smanDisp") //显示的DIV对象 
var objInput = document.getElementById(objInputId); //文本框对象 
  
if (objInput==null){
alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');
return ;
}

//文本框失去焦点 
objInput.onblur=function(){ 
objouter.style.display='none';
} 
//文本框按键抬起 
objInput.onkeyup=checkKeyCode; 
//文本框得到焦点 
objInput.onfocus=checkAndShow;
if(document.addEventListener){
objInput.addEventListener("input",checkAndShow,false);
}

function checkKeyCode(){ 
var ie = (document.all)? true:false 
if (ie){ 
var keyCode=event.keyCode 
if (keyCode==40||keyCode==38){ //下上 
  var isUp=false 
  if(keyCode==40) isUp=true ; 
  chageSelection(isUp); 
}else if (keyCode==13){//回车 
  outSelection(selectedIndex);
}else{ 
  checkAndShow() 
}
}else{
var enableEnter = true;
function myEvent(evt){
evt = evt||window.event;
var keyCode=evt.which||evt.keyCode; 
if (keyCode==40||keyCode==38){ //下上 
  var isUp=false 
  if(keyCode==40) isUp=true ; 
  chageSelection(isUp) 
}else if (keyCode==13){//回车
  outSelection(selectedIndex);
}else{
  var currentTime = new Date();
  while(new Date().getTime()<currentTime.getTime+1000){
  }
  checkAndShow() 
}
}
document.onkeydown = myEvent;

}

divPosition() 
} 

function checkAndShow(){
var strInput = objInput.value 
if (strInput!=""){  
divPosition(); 
  selectedIndex=-1; 
  objouter.innerHTML =""; 
  for (intTmp=0;intTmp<arrList.length;intTmp++){ 
for(i=0;i<arrList[intTmp].length;i++){
if (arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase()){
  addOption(arrList[intTmp],strInput); 
}  
 
}

} 
objouter.style.display=''; 
}else{ 
  objouter.style.display='none'; 
}

function addOption(value,keyw){
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>"); 
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"  
} 
}
 
function chageSelection(isUp){ 
if (objouter.style.display=='none'){ 
objouter.style.display=''; 
}else{ 
if (isUp) 
  selectedIndex++ ;  
else 
  selectedIndex-- ;  
}

var maxIndex = objouter.children.length-1; 
if (selectedIndex<0){selectedIndex=0} 
if (selectedIndex>maxIndex){selectedIndex=maxIndex} 
for (intTmp=0;intTmp<=maxIndex;intTmp++){  
if (intTmp==selectedIndex){ 
  objouter.children[intTmp].className="sman_selectedStyle"; 
}else{ 
  objouter.children[intTmp].className=""; 
} 
}

}

function outSelection(Index){
if(Index>-1&&(document.getElementById("ss").value!="")){
//浏览器兼容
var text = (objouter.children[Index].innerText!=undefined)?(objouter.children[Index].innerText):(objouter.children[Index].textContent)
objInput.value = text; 
objouter.style.display='none';
if(type==1){
document.getElementById("diqu").value = text;
}else if(type==2){
document.getElementById("diqu1").value = text;
}

this.closeDiv(document.getElementById("frame"));
objInput.blur();
}else{
alert("无相关信息！");
}  
}

function divPosition(){ 
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput); 
objouter.style.left =getAbsoluteLeft(objInput);  
objouter.style.width=getAbsoluteWidth(objInput); 
}
}

document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onblur> </div>"); 
document.write("<style>.sman_selectedStyle{background-Color:#BFE6F9;color:#FFFFFF}</style>");

function getAbsoluteHeight(ob){ 
return ob.offsetHeight; 
}

function getAbsoluteWidth(ob){ 
return ob.offsetWidth; 
}

function getAbsoluteLeft(ob){ 
var s_el=0;
el=ob;
while(el){
s_el=s_el+el.offsetLeft;
el=el.offsetParent;
}
return s_el;
}

function getAbsoluteTop(ob){ 
var s_el=0;el=ob;
while(el){
s_el=s_el+el.offsetTop;
el=el.offsetParent;
}  
return s_el; 
} 
}
[解决办法]
顶一下 对我有用
读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net