我一直在尝试创建一个可调整大小的自动完成功能(我什至不确定这是否可行!)。我已经尝试了很多从谷歌获取想法的事情，但未能实现。
我创建了一个可调整大小的菜单的代码，但它没有与文本框的底部对齐，当我第二次搜索时，调整大小选项消失了。有没有办法修复它或者可以通过任何其他方式实现这个功能？
<head runat="server">
<title></title>
<link href="~/css/1.8/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/script/jquery/1.5/jquery.min.js"></script>
<script src="~/script/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
.ui-resizable-se
{
bottom: 0px;
}
.ui-autocomplete
{
background: silver;
overflow-y: hidden; /* prevent horizontal scrollbar */
overflow-x: hidden;
}
</style>
<script>
$(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"
];
$("#tags").autocomplete({
source: availableTags,
open: function (event, ui) {
$('ul.ui-autocomplete').resizable();
}
});
});
$(function () {
$("#ul.ui-autocomplete").resizable({
handles: "se"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">
Tags:
</label>
<input id="tags">
</div>
</form>
</body>
</html>
最佳答案
它确实适用于不同版本的 jquery 和 jquery ui(调整大小自动完成下拉列表)。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
JSFiddle
关于jquery-ui - 可调整大小的自动完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12981742/