CODEWITHSUNDEEP
javascriptjqueryhtmlautocomplete
Terchila Marian
Terchila Marian

Reputation: 2520

jquery autocomplete suggestions come at the bottom of the page

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.

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? enter image description here

$(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

If you have a div with "position:fixed" and an input tag inside, the autocomplete menu will scroll with the rest of the page. Instead, it should stay with the input tag.

That answered my question. Admins might close it, cheers.

Upvotes: 0

Views: 409

Answers (1)

Terchila Marian
Terchila Marian

Reputation: 2520

I've found this after a couple of hours 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. Instead, it should stay with the input tag.

Upvotes: 1

Related Questions