out*_*son 9 jquery jquery-ui jquery-ui-autocomplete
我正在尝试使用JQuery UI Autocomplete插件(点击查看JQuery UI Autocomplete插件的演示页面)
我用作数据源的对象列表如下:
var availableTags = [
{label: "Sao Paulo", value: "SP"},
{label: "Sorocaba", value: "SO"},
{label: "Paulinia", value: "PA"},
{label: "São Roque", value: "SR"}
];
问题是当我选择一个项目时,数据源的值被设置为输入字段而不是标签.我创建了一个select选项,用于将项值保存在隐藏字段中,并将标签设置为输入字段,但插件过早触发此事件,并将值重新设置为输入字段.
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>
拜托,有人可以帮我这个吗？
谢谢!
sno*_*ris 13
因为我也必须解决这个问题.我以为我会展示我的解决方案.恕我直言,它更清洁,因为你不需要单独的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;
}
});?
out*_*son -2
I\xc2\xb4ve 解决了为 OnFocus 和 OnSelect 创建处理程序并在每个处理程序中返回 false 的问题。
\n\n function OnFocus(event, ui)\n {\n $( "#txtCidade" ).val( ui.item.label );\n return false;\n }\n\n function OnSelect(event, ui)\n {\n var item = ui.item;\n var itemLabel = item.label;\n var itemValue = item.value;\n var campo = $("#txtCidade");\n\n $("#hidCidade").val(itemValue);\n $("#txtCidade").val(itemLabel);\n\n var campoValue = campo.val();\n var hidCampoValue = $("hidCidade").val();\n return false;\n }\n