我有2个带有jquery自动完成功能的文本框。我的要求是
如果我选择Text Box 1
标签或值aa
且其ID为1
,则在Text Box 2
标签或值中包含ID为1
的{{1}}应该选择(aa1)
。
我不想将Text Box 1
中的值或匹配值复制到Text Box 2
,反之亦然。
我也想知道how to select autocomplete value by passing its id?
示例:
如果我在文本框1中选择bb
(id = 2),则应选择文本框2中的bb1
(id = 2)。
如果我在文本框2中选择cab1
(id = 5),则应选择文本框1中的cab
(id = 5)。
我的HTML和jQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML5//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/jquery-ui-start-custom-1.10.3.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-custom-1.10.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var arraytxt1 = [{ id: 1, label: "aa" }, { id: 2, label: "bb" }, { id: 3, label: "bbbb" }, { id: 4, label: "abab" }, { id: 5, label: "cab"}];
$("#txt1").autocomplete({
source: arraytxt1,
minLength: 1,
select: function(event, ui) {
//$("#txt2").val(ui.item.label);
// Corresponding Text Box 2 value to selected.
}
});
var arraytxt2 = [{ id: 1, label: "aa1" }, { id: 2, label: "bb1" }, { id: 3, label: "bbbb1" }, { id: 4, label: "abab1" }, { id: 5, label: "cab1"}];
$("#txt2").autocomplete({
source: arraytxt2,
minLength: 1,
select: function(event, ui) {
// Corresponding Text Box 1 value to selected.
}
});
});
</script>
</head>
<body>
<div>
Text Box 1
<input type="text" id="txt1" />
Text Box 2
<input type="text" id="txt2" />
</div>
</body>
</html>
答案 0 :(得分:2)
$("#txt1").autocomplete({
source: arraytxt1,
minLength: 1,
select: function(event, ui) {
var matching_right_side_option;
$.each(arraytxt2, function(index){
if(this.id === ui.item.id)
{
matching_right_side_option = this;
}
});
$("#txt2").val(matching_right_side_option.label);
}
});
答案 1 :(得分:0)
要按ID选择自动填充值,您必须使用value
代替标签:
例如:
$("#txt2").autocomplete({
source: arraytxt2,
minLength: 1,
select: function(event, ui) {
$("#txt1").val(ui.item.value); //selecting by its id(value)
}
});