2011-09-09 8 views
0

私は単純なテキスト入力ボックス "autosuggest/autocomplete"スクリプトを書こうとしています - 少なくともgoogleホームページのように数週間前)シンプルなテキスト入力ボックス "autosuggest"スクリプト - CSSと重複する方法

提案が表示されている場合を除き、すべてが機能し、入力ボックスにテキストをプッシュダウンします。私は、自動提案ボックスの下にテキストを重ねたいと思います。あなたがpoitionを使用してページ上のdivのフロートを作る必要があり、この問題を解決するために

/* 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

:絶対CSSスタイルが、これはイースリーあなたが追加する必要がありJQ

addon here

に正しいアドオンで行われますページ上で何かを押し下げてはならない

$('.cl_preInventoryList').absolutize() 

これをフォローしているライブイベントをinide