简单文本输入框“自动建议” script - 如何与 css 重叠

发布于 2024-12-04 03:22:49 字数 1616 浏览 2 评论 0原文

我正在尝试编写一个简单的文本输入框“自动建议/自动完成”脚本 - 就像在谷歌主页上一样（至少直到几周前他们使它变得更加复杂）

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

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-12-11 03:22:49

要解决这个问题，您应该使用 poition:absolute css 样式让您的 div 浮动在页面上，但这可以通过 JQ

插件

您应该在现场活动中添加以下内容

$('.cl_preInventoryList').absolutize()

这不应将页面上的任何内容推下

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