jQueryUI 自动完成建议显示在输入字段外
jQueryUI autocomplete suggestions showing up outside input field
我在 Django 项目中使用 jQueryUi 设置了一个自动完成表单。
自动完成工作正常。问题是,建议没有显示在我的表单下方,而是显示在屏幕右侧。
我需要建议按原样显示在我的搜索字段下方,并且只显示与我的搜索匹配的前 10 个产品。
我的HTML:
<div class="ui-widget">
<input id="prod" class="form-control mr-sm-2" type="text" name="query" placeholder="">
</div>
我的AJAX:
$(function() {
$("#prod").autocomplete({
source: "/finder/search_auto",
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
},
minLength: 2,
});
});
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
我的views.py:
$(function() {
$("#prod").autocomplete({
source: "/finder/search_auto",
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
},
minLength: 2,
});
});$( "#prod" ).autocomplete({
position: { my : "right top", at: "right bottom" }
});
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
更新为最新版本:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
这应该可以解决问题。
我在 Django 项目中使用 jQueryUi 设置了一个自动完成表单。
自动完成工作正常。问题是,建议没有显示在我的表单下方,而是显示在屏幕右侧。
我需要建议按原样显示在我的搜索字段下方,并且只显示与我的搜索匹配的前 10 个产品。
我的HTML:
<div class="ui-widget">
<input id="prod" class="form-control mr-sm-2" type="text" name="query" placeholder="">
</div>
我的AJAX:
$(function() {
$("#prod").autocomplete({
source: "/finder/search_auto",
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
},
minLength: 2,
});
});
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
我的views.py:
$(function() {
$("#prod").autocomplete({
source: "/finder/search_auto",
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
},
minLength: 2,
});
});$( "#prod" ).autocomplete({
position: { my : "right top", at: "right bottom" }
});
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
更新为最新版本:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
这应该可以解决问题。