类似于Autocomplete和冒泡问题

　　　　<div id="dialogBox_content_id" >　　　　

　　<form>
                <div id="showcontent">
                    <table width="80%" border="0" cellspacing="1" cellpadding="3" align="center" class="contentTable">
                        <tr class="defaultBGColor">
                              <td align="center" >Autopilot定義名:</td>
                            <td align="center" style="position:relative;">
                            <input id="autopilot_name" type="text" onclick="getHistoryQ(event)" width="200px"/> 
                            </td>
                        </tr>
                        <tr class="defaultBGColor">
                              <td align="center">JSP:</td>
                            <td align="center"><input id="add_time" type="text"/></td>
                        </tr>
                    </table>
                </div>
            </form>
            <div id="autopilot_name_div" style="position:absolute;top:25px;left:260px;">
            </div>

</div>

上图为要实现的效果，类似于搜索的autocomplete。。

但这里存储方式是cookie

onclick="getHistoryQ(event)"

这时会弹出“下拉框”。。（开始用的是onfocus）,会出现：foucus之后，下拉框出来后立即消失。（这是因为，此时的事件是foucus事件，阻止冒泡只能阻止向上的foucus事件，
以下事件不冒泡：blur、focus、load、unload（见http://www.chhua.com/web-note1109）。
而执行完getHistoryQ后，click时间到达document，

clearQ也就响应。。）

js如下

+function(){
　　if(!''.trim){
　　String.prototype.trim=function (){return (this.replace(/^\s*/,'')).replace(/\s*$/,'');};//兼容IE
　　}
}();

function setCookies(autopilot_name){

　　　　　　　　　　var d=document;

　　　　　　　　　　　　if(value===''){
　　　　　　　　　　　　　　　　d.cookie="Q_ED="+escape(value)+";expires="+0;
　　　　　　　　　　　　　　　　return;
　　　　　　　　　　　　}

            var day=10;
            var date=new Date();    
            date.setTime(date.getTime()+day*24*3600*1000);
            
            var old_v_cookie=getCookies('Q_ED');
            if(old_v_cookie!==''){
                autopilot_name+=','+old_v_cookie;
            }
            d.cookie="Q_ED="+escape(autopilot_name)+";expires="+date.toGMTString();
        }
        function getCookies(autopilot_name){
            var  v_cookie=document.cookie;
            if(v_cookie.length>0){
                var c_start=v_cookie.indexOf(autopilot_name+'=');
                if(c_start!=-1){
                    c_start=c_start+autopilot_name.length+1;
                    c_end=v_cookie.indexOf(';',c_start);
                    if(c_end==-1){c_end=v_cookie.length;}
                    return unescape(v_cookie.substring(c_start,c_end));
                }
            }            
            return '';
        }
        function getHistoryQ(event){
            var oldValue=getCookies('Q_ED');
            if(oldValue==='')return;
            var q_eles=oldValue.split(',');
            var d=document;
            var t=d.getElementById('autopilot_name_div');　

 　　　　　　　　　　stopBubble(event);//阻止冒泡行为

　　　　　　　　　　　　if(t.innerHTML.trim()!==''){
　　　　　　　　　　　　　　　　return;
　　　　　　　　　　　　}//判断用户在input里面多次点击

            var table=d.createElement('table');
            var tbody=d.createElement('tbody');
            for(var i=0;i<q_eles.length&&i<5;i++){//只显示最近的5条搜索历史
                if(q_eles[i].trim()===''){
                    continue;
                }
                var tr=d.createElement('tr');
                var td=d.createElement('td');//
                td.onclick=function(event){
                    document.getElementById('autopilot_name').value=this.innerHTML;
                    stopBubble(event);
                    clearQ();
                }
                var text=d.createTextNode(q_eles[i]);
                td.appendChild(text);
                tr.appendChild(td);
                tbody.appendChild(tr);
            }
            table.appendChild(tbody)

　　　　　　　　　　　　var clear_div=d.createElement('div');
　　　　　　　　　　　　var clear_a=d.createElement('a');
　　　　　　　　　　　　clear_a.href='##';
　　　　　　　　　　　　clear_a.onclick=clearCookie;
　　　　　　　　　　　　clear_a.appendChild(d.createTextNode('Clear'));//在右下角添加一个clear、的链接用来清空cookie
　　　　　　　　　　　　clear_div.appendChild(clear_a);
　　　　　　　　　　　　clear_div.style.cssText="position:absolute;bottom:2px;right:2px;";

　　　　　　　　　　　　t.appendChild(clear_div);

            t.appendChild(table);
            d.getElementById('autopilot_name_div').style.display='block';
            //alert(event);
           
            d.onclick=function(){
                    clearQ();
                    document.onclick=null;
            }
        }
        function clearQ(){
            
            //setTimeout(function(){
            var d=document;
            alert(d.getElementById('autopilot_name_div').innerHTML);
            d.getElementById('autopilot_name_div').innerHTML='';
            alert(d.getElementById('autopilot_name_div').innerHTML);
            d.getElementById('autopilot_name_div').style.display='';
            
            //},150);
        }

　　　　　　　　function clearCookie(){
　　　　　　　　　　setCookies('1','');//清空cookie
　　　　　　　　}

        function stopBubble(e){
            
            if(e&&e.stopPropagation){
                e.stopPropagation();
            }else{
                window.event.cancelBubble=true;
            }
        }

这里是利用禁止事件冒泡向上反应。。。

css端

<style type="text/css">
        #autopilot_name_div    {
            border: 1px solid #817F82;
            text-align: left;
            overflow-y:auto;
            overflow-x:hidden;
            width:126px;
            height:120px;
            display:none;
        }
        #autopilot_name_div    table{
            width:100%;
          // height:100%;不要设置高度。。否则只有一行时也会占有所有的高度
            background: none repeat scroll 0 0 #FFFFFF;
        }
        #autopilot_name_div    table td{
            margin:0px;
            padding:0px;
            cursor: default;
            
        }
        #autopilot_name_div    table td:hover{
            background-color:#E2EAFF;
            
        }
        #dialogBox_content_id{
            position:relative;
        }
    </style>