开发者

simple text input box "autosuggest" script - how to overlap with css

开发者 https://www.devze.com 2023-04-04 01:19 出处:网络
I am trying to write a simple text input box \"autosuggest/autocomplete\" script - like on the google home page (at least until they made it more complex a few weeks ago)

I am trying to write a simple text input box "autosuggest/autocomplete" script - like on the google home page (at least until they made it more complex a few weeks ago)

Everything works, except when the suggestions appear, they push down text blow the input box. I would like to overlap text below the auto suggest box.

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


To solve this problem you should make your div float on the page using the poition:absolute css style but this is easly done with the correct addon to JQ

addon here

you should add inide the live event the following

$('.cl_preInventoryList').absolutize()

This should not push anything down on the page

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号