simple text input box "autosuggest" script - how to overlap with css
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
精彩评论