jQuery UI自动完成不能很好地用于引导下拉列表
代码：
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">dumped_li</a></li>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</ul>
</div>
</div>
</body>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>我做了一些代码，有jQuery UI自动完成在引导下拉。
当我运行它时，搜索栏(在本例中，输入-#标记)被很好地放置在下拉菜单中，但是autocomplish()结果显示在下拉菜单本身之外。
问题：如何将autocomplish()结果很好地放置到下拉菜单中，比如input (#tags)？
编辑：
我阅读了这篇堆栈溢出文章：https://stackoverflow.com/a/7944662/6736285和我发现了使用引导带和不使用引导带之间的区别。
听着，如果我使用引导: jsfiddle：http://jsfiddle.net/uMqyn/912/
代码：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body>
<div class="dropdown bigdiv">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu bigul">
<li><a href="#">dumped_li</a></li>
<li class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="anotherdiv" style="background-color: #447e9b; height: 200px;">
GoesHere:
<br/>
<ul></ul>
</div>
</body>
<script>
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
];
$('#tags').autocomplete({
search: function(event, ui) {
$('.anotherdiv ul').empty();
},
source: availableTags
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li></li>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.anotherdiv ul'));
};
</script>正如你在“小提琴”中所看到的，它的作用就好像结果不是在另一个人身上一样。
但我去掉了鞋带，效果很好。
您可以看到引导删除版本jsfiddle：http://jsfiddle.net/uMqyn/913/
所以,
Question1:为什么引导出现这种情况？
Question2:，我如何使它在显示结果方面做得很好，即使我正在使用引导？
回答 1
Stack Overflow用户
发布于 2017-12-01 09:02:05
AFAIK --您可能遇到了一些兼容性问题(我不确定，但如果处于您的位置，我可能会放弃jquery ui --它还没有被更新并且很老--并且可能与引导css不太兼容)。
jQuery UI v1.12.1似乎只与jQuery 1.7+兼容
jQuery UI v1.12.1 jQuery 1.7+
从您的示例(http://jsfiddle.net/uMqyn/912/)中，您正在尝试在jquery 3.2.1中使用jquery-ui 1.12.1。
使用引导+ jquery 1.9.1 +jquery 1.9.2
http://jsfiddle.net/sudarpochong/uMqyn/914/
没有引导(只有jquery 1.9.1 +jquery 1.9.2)
http://jsfiddle.net/sudarpochong/uMqyn/916/
备注
如果您注意到，以上两个链接(有和不带引导)都会产生类似于您在http://jsfiddle.net/uMqyn/913/中所期望的结果。
P.S.
- 检查
jsfiddle --> external resources如何包含引导js和css。 - JSFiddle - Javascript选项允许您选择jquery和jquery。
https://stackoverflow.com/questions/47581713
复制相似问题
腾讯云开发者
