我正在尝试使用 JQuery UI 自动完成插件 ( click to see the demo page of JQuery UI Autocomplete plugin )
我使用以下对象列表作为数据源:
var availableTags = [
{label: "Sao Paulo", value: "SP"},
{label: "Sorocaba", value: "SO"},
{label: "Paulinia", value: "PA"},
{label: "São Roque", value: "SR"}
];
问题是，当我选择一个项目时，数据源的值设置为输入字段而不是标签。我已经创建了一个选择句柄，以将项目值保存在隐藏字段中，并将标签设置为输入字段，但插件触发此事件的速度太快，并且该值被重新设置为输入字段。
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.base.css" />
<link rel="stylesheet" type="text/css" href="JQuery.UI/1.8.14/themes/base/jquery.ui.theme.css" />
<style>
.ui-menu-item
{
font-size: 12px;
}
</style>
<script src="JQuery/1.6.2/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="JQuery.UI/1.8.14/js/jquery-ui-1.8.14.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var availableTags = [
{label: "Sao Paulo", value: "SP"},
{label: "Sorocaba", value: "SO"},
{label: "Paulinia", value: "PA"},
{label: "São Roque", value: "SR"}
];
$("#txtCidade").autocomplete({ minLength: 0,
source: availableTags);
});
function OnSelect(event, ui)
{
var item = ui.item;
var itemLabel = item.label;
var itemValue = item.value;
$("#hidCidade").val(itemValue);
$("#txtCidade").val(itemLabel);
}
</script>
</head>
<body>
<form>
<input id="hidCidade" type="hidden" />
<input id="txtCidade" type="input" class="ui-autocomplete-input" />
</form>
</body>
</html>
请问有人可以帮我解决这个问题吗？
谢谢!
最佳答案
因为我也必须解决这个问题。我想我会展示我的解决方案。恕我直言，它更干净，因为您不需要单独的 OnSelect 和 OnFocus 功能。 (尽管它确实与 rperson 最终所做的事情相同)
$('#txtCidade').autocomplete({
source: availableTags,
focus: function(event, ui) {
$(this).val(ui.item.label);
return false;
},
select: function(event, ui) {
$('#hidCidade').val(ui.item.value);
$(this).val(ui.item.label);
return false;
}
});
关于JQuery UI 自动完成 - 如何选择一个项目并维护输入文本中的标签(而不是值)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9771798/