Jquery autocomplete inside modal

Asked

Viewed 362 times

0

Hello I have a problem using jquery in a modal, out of modal the script works correctly but if I put the input inside the modal it does not work.

<!DOCTYPE html>
<html>
<head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Teste de JQuery</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script>
                $(function(){
                    var esportes = ["Natação","Basquete","Futebol"];
                    $("#esporte").autocomplete({
                        source: esportes
                    });
                });
                </script>
</head>

<body>

        <input type="text" id="esporte" placeholder="digite um esporte"><!--Onde ocorre o autocompletar-->

        <div class="container">
                <h2>Modal Example</h2>
                <!-- Trigger the modal with a button -->
                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

                <!-- Modal -->
                <div class="modal fade" id="myModal" role="dialog">
                  <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                     <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">&times; 
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">


</div>
<div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>

      </div>
</body>
jquery html5
  • 1

    edit the question and include the full code there

1 answer

1


The problem lies in two points. 1º the modal class defines a z-index of 1050; 2º the jquery-ui plugin in the ui-front class' a z-index of 100;

That is if you change the z-index of the ui-front class to 1051 should work.

Printscreen

<!DOCTYPE html>
<html>

<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>Teste de JQuery</title>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
	<style>
		.ui-front{
			z-index: 1051;
		}
	</style>
</head>

<body>

	<div class="container">
		<h2>Modal Example</h2>
		<!-- Trigger the modal with a button -->
		<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

		<!-- Modal -->
		<div class="modal fade" id="myModal" role="dialog">
			<div class="modal-dialog">

				<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">

						<button type="button" class="close" data-dismiss="modal">&times;
						</button>
						<h4 class="modal-title">Modal Header</h4>
					</div>
					<div class="modal-body">
						<input type="text" id="esporte" placeholder="digite um esporte">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					</div>
				</div>

			</div>
		</div>

	</div>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
	<script>
		$(function () {
			var esportes = ["Natação", "Basquete", "Futebol"];
			$("#esporte").autocomplete({
				source: esportes
			});
		});
	</script>
</body>

  • 1

    Solved friend thank you very much!!!!

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.