Fatal编程技术网
  • javascript/
  • Javascript 文本建议滚动页面：与devbridge.com一起发布；“自动完成文本框”；

Javascript 文本建议滚动页面：与devbridge.com一起发布；“自动完成文本框”；

javascript jquery html css

Javascript 文本建议滚动页面：与devbridge.com一起发布；“自动完成文本框”；,javascript,jquery,html,css,jquery-ui-autocomplete,Javascript,Jquery,Html,Css,Jquery Ui Autocomplete,我正在使用devbridge.com“自动完成文本框”；所需的.js文件可从以下位置下载： 在我的网页布局中，我保留了固定的标题、固定的左侧导航和控制区域、固定的右侧内容区域以及可滚动的中间区域。我在固定左侧导航和控制区域添加了文本输入。由于我正在使用外部资源（需要下载devbridge.com提供的相应jquery.autocomplete.min.js），我的整个问题无法在jsfiddle.net中复制，但我仍然在那里发布了代码框架 确切的问题是：一旦网页加载，一旦用户在文本框中键入文本

我正在使用devbridge.com“自动完成文本框”；所需的.js文件可从以下位置下载：

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

确切的问题是：一旦网页加载，一旦用户在文本框中键入文本，就会弹出建议；在本例中，键入“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>

$(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);
        }
    });
});

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; }
CSS代码

<!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>

$(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);
        }
    });
});

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; }
将这两个属性添加到CSS以覆盖顶部和位置属性：

.autocomplete-suggestions { 
  position: fixed !important;
  background: #fff; 
  cursor: default;  
  overflow: auto; 
  top: 82px !important;
}
你的小提琴坏了！什么也没出现！因为jQuery是未定义的marouen，所以我已经尝试过了，但它仍然不起作用。提供的fiddle无法工作，因为它需要没有CDN链接的外部资源，我不知道如何在fiddle中下载并添加external.js使其工作。@NimishJain:这对我来说很好。看看这个：这是我的错误。我没有使用！重要修饰语。它现在对我来说也是一种魅力。非常感谢。