文本建议滚动页面：devbridge.com问题“自动填充文本框”

问题描述 投票：-1回答：1

我正在使用devbridge.com“Autocomplete Text Box”;必需的.js文件可以从以下网址下载：https://www.devbridge.com/sourcery/components/jquery-autocomplete/

在我的网页布局中，我保留了固定标题，修复了左侧导航和控制区域，固定了右侧内容区域和可滚动的中间区域。我在固定的左侧导航和控制区域添加了文本输入。由于我正在使用外部资源（devbridge.com需要下载适当的jquery.autocomplete.min.js），我的整个问题无法在jsfiddle.net中复制，但我仍然在那里发布了代码框架。

https://jsfiddle.net/odwkfpqp/

确切的问题是：一旦加载了网页，只要用户在文本框中输入文字，就会弹出建议;在这个例子中输入“va”将会发挥魔力。由于建议弹出完整（即尚未选择动作），如果用户向上或向下滚动网页，则建议弹出元素也会移动。关于文本输入控制，该元素没有固定。我怎样才能做到这一点？我在CSS中尝试了很多选项，但都是徒劳的。

HTML代码

<!doctype html>
<html lang="en-US">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Input Text AutoComplete</title>
        <link rel="stylesheet" type="text/css" href="prc.css">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="jquery.autocomplete.min.js"></script>
        <script type="text/javascript" src="prc.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="header">
            </div>
            <div class="content">
                <div id="left" class="left">
                    <input type="text" class="autosearch" id="autosearch" name="autosearch" placeholder="Search"/>
                </div>
                <div id="middle" class="middle">
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                    <p>hello</p>
                    <p align="right">hello</p>
                </div>
                <div id="right" class="right">
                </div>
            </div>
        </div>
    </body>
</html>

Javascript代码

$(function(){
    var nvarr = [
        { name: "name0", value: "value0" },
        { name: "name1", value: "value1" },
        { name: "name2", value: "value2" },
        { name: "name3", value: "value3" },
        { name: "name4", value: "value4" },
        { name: "name5", value: "value5" },
        { name: "name6", value: "value6" },
        { name: "name7", value: "value7" },
        { name: "name8", value: "value8" },
        { name: "name9", value: "value9" },
    ];

    $('#autosearch').autocomplete({
        lookup: nvarr,
        onSelect: function (nv) {
            alert(nv.name + " " + nv.vlaue);
        }
    });
});

CSS代码

html, body {
    height: 100%;
}

body {
    margin: 0;
}

div.container {
    height: 100%;
    width: 100%;
    position: relative;
}

div.header {
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #6B7A8F;
}

div.content {
    margin-top: 50px;
}

div.left,div.right {
    width: 150px;
    top: 50px;
    bottom: 0;
    position: fixed;
    background-color: #77C9D4;
}

div.middle {
    margin: 50px 150px 0px;
    background-color: #E8E8E8;
    min-height: 100%;
}

div.content,div.left,div.right {
    height: 100%;
}

div.left {
    left: 0;
}

div.right {
    right: 0;
}

input.autosearch {
    font-family: serif;
    font-size: 12px;
}

input.autosearch {
    margin: 2px;
    padding: 2px;
    height: 30px;
    width: -webkit-calc(100% - 4px);
    width: -moz-calc(100% - 4px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;  
}

.autocomplete-suggestions { background: #fff; cursor: default; overflow: auto;}
.autocomplete-suggestion { padding: 10px 5px; font-family: serif; font-size: 12px; white-space: nowrap; overflow: scroll; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399ff; }
javascript jquery html css jquery-ui-autocomplete
1个回答
0
投票

将这两个属性添加到CSS以覆盖顶部和位置属性：

.autocomplete-suggestions { 
  position: fixed !important;
  background: #fff; 
  cursor: default;  
  overflow: auto; 
  top: 82px !important;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.