2011-09-09 17 views
0

我試圖寫一個簡單的文本輸入框「自動提示/自動完成」腳本 - 像谷歌主頁上(至少直到他們變得更加複雜前幾個星期)簡單的文本輸入框中輸入「自動提示」腳本 - 如何用CSS重疊

一切正常,當出現建議除,他們按下文字吹輸入框。我想重疊汽車下方的文本框中建議。

/* listener on keyup event in parts box*/ 
     $('.SRPR').live('keyup', function() { 
       var stringLength = $(this).val().length; 
       var stringValue = $(this).val(); 
       if(($(this).val().length) > 2){                     
        var location = $(this); 
        fnShowSuggestions(location, stringValue, stringLength); 
       } 
       else{ 
        var location = $(this); 
        var divToPutData = location.nextAll("div"); 
        divToPutData.hide('slow'); 
       }        
     }); 



<input name="SRPR" class="SRPR type="text"> 
    <div class="cl_preInventoryList"> 
    auto-suggest text goes here. 
    </div> 
</div> 
<b>other stuff here</b> 


/* styling to auto-suggest*/ 
.cl_preInventoryList{ 
    padding-left: 90px; 
    margin-top: 2px; 
    z-index: 99;   
} 

.cl_preInventoryList a {  
    color: white; 
    text-decoration: none; 
} 
.cl_preInventoryList ul { 
    list-style-position: outside; 
    list-style: none; 
    padding: 0; 
    margin: 0;  
} 
.cl_preInventoryList li { 
    margin: 0px;  
    padding: 2px 5px; 
    cursor: default; 
    display: block; 
    color: white; 
    line-height: 16px; 
    overflow: hidden; 
    border-width: 1px; 
    border: 1px solid #405B76; 
} 

回答

1

爲了解決這個問題,你應該使用poition在頁面上的div浮動:絕對CSS樣式但這伊斯利用正確的插件做JQ

addon here

您應該添加inide以下

$('.cl_preInventoryList').absolutize() 

這個現場活動不應該推下來的任何頁面上