1

我有 2 个带有 jquery 自动完成功能的文本框。我的要求是

如果我选择Text Box 1标签或值aa且其 id 为，1则应选择Text Box 2包含 id 的标签或值。1(aa1)

我不想复制价值或匹配价值，Text Box 1反之亦然Text Box 2。

我也想知道how to select autocomplete value by passing its id?

例子 ：

如果我bb在文本框 1 中选择 (id=2)，bb1则应选择文本框 2 中的 (id=2)。

如果我cab1在文本框 2 中选择 (id=5)，cab则应选择文本框 1 中的 (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>
4

2 回答 2

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);
                }
            });
于 2013-09-07T10:27:07.407 回答
0

要通过其 id 选择自动完成值，您必须使用value而不是标签：

例如：

        $("#txt2").autocomplete({
            source: arraytxt2,
            minLength: 1,
            select: function(event, ui) {
              $("#txt1").val(ui.item.value);  //selecting by its id(value)
            }
        });
于 2013-09-07T10:18:20.883 回答