Question

我正在尝试编写一个简单的文本输入框“autosuggest / autocomplete”脚本 - 就像在google主页上一样（至少在他们几周之前让它变得更复杂之前）

一切正常，除了建议出现时，他们按下文字吹输入框。我想重叠自动建议框下方的文字。

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

Answer 1

要解决这个问题，你应该使用poition：absolute css样式让你的div浮动在页面上，但是使用JQ的正确插件很容易做到这一点

addon here

您应该在以下

中添加直播活动

$('.cl_preInventoryList').absolutize()

这不应该在网页上推下任何内容

简单的文本输入框“autosuggest”脚本 - 如何与css重叠

1 个答案: