【发布时间】：2026-01-20 23:30:02
【问题描述】：
我正在尝试使用 jquery ui 和 twitter bootstarp 进行自动完成搜索。我在导航栏中添加了一个 facny 搜索框，一切似乎都运行良好。请查看code sn-p below，或者您也可以在此JSFiddle 上查看相同的代码，只需输入“a”，它会自动在下拉列表中显示结果。 p>
问题在于平板电脑和手机版的bootstrap导航栏，例如下面的代码sn-p默认显示平板电脑版本，所以bootstarp导航栏调整了它的高度，但是当我在平板电脑或手机版上搜索时，自动完成结果留在导航栏后面这是固定位置。我尝试使用 z-index 并更改 .ui-autocomplete {position:relative;} 来解决此问题，但对我来说没有任何效果。下面是这个问题的图片。
请看下面的代码 sn-p，谢谢
$(function () {
// Remove Search if user Resets Form or hits Escape!
$('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
console.log(event.currentTarget);
if (event.which == 27 && $('.navbar-collapse form[role="search"]').hasClass('active') ||
$(event.currentTarget).attr('type') == 'reset') {
closeSearch();
}
});
function closeSearch() {
var $form = $('.navbar-collapse form[role="search"].active')
$form.find('input').val('');
$form.removeClass('active');
}
// Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
$(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
event.preventDefault();
var $form = $(this).closest('form'),
$input = $form.find('input');
$form.addClass('active');
$input.focus();
});
});
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#search" ).autocomplete({
source: availableTags
});
});body {
padding: 60px 0px;
}
.navbar-collapse {
position: relative;
padding-top: 30px !important;
max-height: 270px;
}
.navbar-collapse form[role="search"] {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
padding: 0px;
margin: 0px;
z-index: 0;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
padding: 8px 12px;
border-radius: 0px;
border-width: 0px;
color: rgb(119, 119, 119);
background-color: rgb(248, 248, 248);
border-color: rgb(231, 231, 231);
box-shadow: none;
outline: none;
}
.navbar-collapse form[role="search"] input {
padding: 16px 12px;
font-size: 14pt;
font-style: italic;
color: rgb(160, 160, 160);
box-shadow: none;
}
.navbar-collapse form[role="search"] button[type="reset"] {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse {
padding-top: 0px !important;
padding-right: 38px !important;
}
.navbar-collapse form[role="search"] {
width: 38px;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
padding: 15px 12px;
}
.navbar-collapse form[role="search"] input {
font-size: 18pt;
opacity: 0;
display: none;
height: 50px;
}
.navbar-collapse form[role="search"].active {
width: 100%;
}
.navbar-collapse form[role="search"].active button,
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
}
.navbar-collapse form[role="search"].active input {
width: 100%;
}
}
.ui-autocomplete {
z-index:1000;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
width:500px;
}
* html .ui-autocomplete {
height: 500px;
z-index:1000;
width:500px;
}
.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Example logo</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Drop Down<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" id="search" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="reset" class="btn btn-default">
<span class="glyphicon glyphicon-remove">
<span class="sr-only">Close</span>
</span>
</button>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search">
<span class="sr-only">Search</span>
</span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>请帮我解决这个问题。
【问题讨论】：
标签： twitter-bootstrap jquery-ui twitter-bootstrap-3 jquery-ui-autocomplete