jquery 自动完成建议位于页面底部

Question

I got a registration form where the user has to pick up one of the possible options or register his own university.我得到了一个注册表单，用户必须在其中选择一个可能的选项或注册自己的大学。 For that, I thought It would be a great idea to be using jquery autocomplete functionality because it seemed pretty straight forward but here we go again.为此，我认为使用jquery 自动完成功能是一个好主意，因为它看起来很简单，但我们又来了。

This is the code that I'm using just for testing it out这是我用来测试的代码

$(document).ready(function(){
  $("#name").autocomplete({
    source: [
      "Apple",
      "Orange",
      "bananna"
    ],
    select: function(event, selectedData){
      console.log(selectedData);
    }
  })
})

And here's the one that I am using for the actual page.这是我用于实际页面的那个。 The problem that I occur is that the suggestions come at the bottom of the page instead of being weather above or below the actual input.我遇到的问题是建议出现在页面底部，而不是在实际输入之上或之下的天气。 How could I possibly display them as a dropdown below the actual input?我怎么可能将它们显示为实际输入下方的下拉菜单？

 $(document).ready(function(){ $("#name").autocomplete({ source: [ "Apple", "Orange", "bananna" ], select: function(event, selectedData){ console.log(selectedData); } }) })

 <!-- ========================================================= * Now UI Kit - v1.3.0 ========================================================= * Product Page: https://www.creative-tim.com/product/now-ui-kit * Copyright 2019 Creative Tim (http://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md) * Designed by www.invisionapp.com Coded by www.creative-tim.com ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="http://bedford-computing.co.uk/hackathon//assets/img/apple-icon.png"> <link rel="icon" type="image/png" href="http://bedford-computing.co.uk/hackathon//assets/img/favicon.png"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> IUSCH | Register university </title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' /> <!-- Fonts and icons --> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- CSS Files --> <link href="http://bedford-computing.co.uk/hackathon//assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://bedford-computing.co.uk/hackathon//assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" /> <link href="http://bedford-computing.co.uk/hackathon/assets/css/animate.css" rel="stylesheet" /> <!-- CSS Just for demo purpose, don't include it in your project --> <link href="http://bedford-computing.co.uk/hackathon//assets/demo/demo.css" rel="stylesheet" /> </head> <body class="login-page sidebar-collapse"> <!-- Navbar --> <nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand" href="<?php echo base_url() . 'welcome'?>"> HOME </a> <a class="navbar-brand" href="<?php echo base_url() . 'scenarious'?>"> SCENARIOS </a> <a class="navbar-brand" href="<?php echo base_url() . 'user/contact_us'?>"> CONTACT US </a> <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-bar top-bar"></span> <span class="navbar-toggler-bar middle-bar"></span> <span class="navbar-toggler-bar bottom-bar"></span> </button> </div> <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="<?php echo base_url(); ?>assets/img/blurred-image-1.jpg"> <?php if ($this->session->userdata('email') != ''): ?> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url() . 'user/my_account'?>">My profile</a> </li> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url() . 'user/logout'?>">Logout</a> </li> </ul> <?php else: ?> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="<?php echo base_url() . 'user'; ?>">Login</a> </li> <li class="nav-item"> <div class="dropdown"> <a class="nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Register </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="<?php echo base_url() . 'register_user'?>">Student</a> <a class="dropdown-item" href="<?php echo base_url() . 'register_uni'?>">University</a> </div> </div> </li> </ul> <?php endif; ?> </div> </div> </nav> <!-- End Navbar --> <div class="page-header clear-filter" > <div class="page-header-image" style="background-image:url(http://bedford-computing.co.uk/hackathon/assets/img/uni/UoB_JimStephenson-23-WebRes.jpg)"></div> <div class="content"> <div class="container"> <div class="col-md-4 ml-auto mr-auto"> <div class="card card-signup animated shake" data-background-color="orange" style="margin-top:10%"> <form class="form" method="post" action="<?php echo base_url(); ?>register_uni/validation"> <div class="card-header text-center"> <h3 class="card-title title-up">Register University</h3> <div class="logo-container"> </div> </div> <div class="card-body"> <span class="text-danger"> <?php echo form_error('name');?> <?php echo form_error('contact_first_name');?> <?php echo form_error('contact_last_name');?> <?php echo form_error('university_id');?> </span> <div class="input-group no-border input-lg"> <input type="text" name="name" id="name" class="form-control" placeholder="University name"> </div> <div class="input-group no-border input-lg"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="now-ui-icons users_circle-08"></i> </span> </div> <input type="text" name="contact_first_name" placeholder="Contact first name" class="form-control" /> </div> <div class="input-group no-border input-lg"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="now-ui-icons users_circle-08"></i> </span> </div> <input type="text" name="contact_last_name" placeholder="Contact last name" class="form-control" /> </div> <div class="input-group no-border input-lg"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="now-ui-icons users_circle-08"></i> </span> </div> <input type="text" name="contact_email" placeholder="Contact email" class="form-control" /> </div> </div> <div class="card-footer text-center"> <input type="submit" name='register_uni' class="btn btn-neutral btn-round btn-lg"> </form> </div> </div> </div> </div> </div> <!-- Core JS Files --> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> type="text/javascript"></script> <script src="http://bedford-computing.co.uk/hackathon/assets/js/core/popper.min.js" type="text/javascript"></script> <script src="http://bedford-computing.co.uk/hackathon/assets/js/core/bootstrap.min.js" type="text/javascript"></script> <!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ --> <script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-switch.js"></script> <!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ --> <script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/nouislider.min.js" type="text/javascript"></script> <!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker --> <script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script> <!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc --> <script src="http://bedford-computing.co.uk/hackathon/assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script> </body> </html>

UPDATE: I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391更新：几个小时后我发现了这个https://bugs.jqueryui.com/ticket/8391

If you have a div with "position:fixed" and an input tag inside, the autocomplete menu will scroll with the rest of the page.如果您有一个带有“position:fixed”的 div 并且里面有一个 input 标签，自动完成菜单将与页面的其余部分一起滚动。 Instead, it should stay with the input tag.相反，它应该与输入标签保持一致。

That answered my question.那回答了我的问题。 Admins might close it, cheers.管理员可能会关闭它，干杯。

Answer 1

I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391几个小时后我发现了这个https://bugs.jqueryui.com/ticket/8391

If you have a div with "position:fixed" and an input tag inside, the autocomplete menu will scroll with the rest of the page.如果您有一个带有“position:fixed”的 div 并且里面有一个 input 标签，自动完成菜单将与页面的其余部分一起滚动。 Instead, it should stay with the input tag.相反，它应该与输入标签保持一致。

jquery 自动完成建议位于页面底部

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-02-09 06:29:46

jquery 自动完成建议位于页面底部

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-02-09 06:29:46

解决方案1
0 已采纳 2020-02-09 06:29:46