我已经实现了一个jQuery自动完成功能到Bootstrap输入。 jQuery自动完成工作正常，但我想将结果看作是一个组合，我猜这是因为我使用的是BootStrap。
这是我分配自动填充的字段：
<div class="form-group"> <label>Employee</label> <input class="form-control" name="txtEmployee" placeholder="Trabajador"> </div>
$(this).autocomplete({
source: function(request,response) {
$.ajax({
url: '@Url.Content("~/Employee/SearchEmployee")/',type: 'POST',contentType: 'application/json',dataType: "json",data: JSON.stringify({
employerId: 1,searchStr: me.val()
}),success: function(data) {
if (data.success) {
response($.map(data.data,function(item) {
return {
label: "(" + item.EmployeeNumber + ") " +
item.FirstName + " " +
item.MothersLast + "," +
item.FathersLast,employeeId: item.EmployeeId
}
}));
}
}
});
},minLength: 3
});
结果显示，但如下所示：
如何使用Bootstrap来调整结果的风格，以便我们可以看到他们的下拉列表？
解决方法
如果您使用jQuery-UI，则必须包含jQuery UI CSS包，否则UI组件不知道如何设置样式。
如果您不喜欢jQuery UI样式，那么您将不得不重新创建其它应用的所有样式。
这里有一个例子和一些可能的修复。
Minimal,Complete,and Verifiable example(即破)
这是一个没有jquery-ui.css的Stack Snippets的演示(不工作)
$(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"
];
$(".autocomplete").autocomplete({
source: availableTags
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<div class="form-group">
<label>Languages</label>
<input class="form-control autocomplete" placeholder="Enter A" />
</div>
<div class="form-group">
<label >Another Field</label>
<input class="form-control">
</div>
</div>
修复#1 – jQuery-UI风格
只需包含jquery-ui.css，并且所有应用程序都可以使用最新支持的jquery版本。
$(function() {
var availableTags = [
"ActionScript","Scheme"
];
$(".autocomplete").autocomplete({
source: availableTags
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<div class="form-group">
<label>Languages</label>
<input class="form-control autocomplete" placeholder="Enter A" />
</div>
<div class="form-group">
<label >Another Field</label>
<input class="form-control">
</div>
</div>
修复#2 – 引导主题
有一个项目为jQuery-UI组件(称为jquery‑ui‑bootstrap)创建了一个Bootstrap-esque主题。只需从那里抓取样式表即可。
$(function() {
var availableTags = [
"ActionScript","Scheme"
];
$(".autocomplete").autocomplete({
source: availableTags
});
});
<link href="http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<div class="form-group">
<label>Languages</label>
<input class="form-control autocomplete" placeholder="Enter A" />
</div>
<div class="form-group">
<label >Another Field</label>
<input class="form-control">
</div>
</div>
修复#3 – 手动CSS
如果只需要jQuery-UI库中的AutoComplete窗口小部件，那么您应该首先进行自定义构建，以便您不要使用不使用的资源。
之后，您将需要自己的风格。只需查看应用于jquery的autocomplete.css和theme.css的其他一些样式，以确定您需要手动替换的样式。
您可以使用bootstrap的dropdowns.less灵感。
这是一个CSS脚本，适用于Bootstrap的默认主题：
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-Box-shadow: 0 5px 10px rgba(0,0.2);
-moz-Box-shadow: 0 5px 10px rgba(0,0.2);
Box-shadow: 0 5px 10px rgba(0,0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
$(function() {
var availableTags = [
"ActionScript","Scheme"
];
$(".autocomplete").autocomplete({
source: availableTags
});
});
.ui-autocomplete {
position: absolute;
z-index: 1000;
cursor: default;
padding: 0;
margin-top: 2px;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-Box-shadow: 0 5px 10px rgba(0,0.2);
}
.ui-autocomplete > li {
padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
background-color: #DDD;
}
.ui-helper-hidden-accessible {
display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="container">
<div class="form-group ui-widget">
<label>Languages</label>
<input class="form-control autocomplete" placeholder="Enter A" />
</div>
<div class="form-group ui-widget">
<label >Another Field</label>
<input class="form-control" />
</div>
</div>
Tip: Since the dropdown menu hides every time you go to inspect the element (i.e. whenever the input loses focus),for easier debugging of the style,find the control with
.ui-autocompleteand removedisplay: none;.