Question

以下是我的代码，如何获取所选的自动完成文本框值 JQuery的？

<script type="text/javascript" src="JS/jquery.min.js"></script>
    <script src="JS/jquery.autocomplete.js"></script>
    <script>
             $(function() {
                $( "#data" ).autocomplete("list.jsp")

             });
      </script>  
        <script> 
             $(document).ready(function () {
                    $('#data').on('change', function () {
                        $('#d').html('You selected: ' + this.value);
                    }).change();
                    $('#data').on('autocompleteselect', function (e, ui) {
                        $('#d').html('You selected: ' + ui.item.value);
                    });
                });

          </script> 
    </head>
    <body>
    <form action="osave.jsp" name="frm" method="post">
    Customer Name <input type="text" id="data" name="cname">
    <div id="d"></div>
    </form>

文本框自动完成功能正常，但无法获取所选的文本框值。输出如下：

客户名称：usha
你选择了：你

Answer 1

为了更广泛地回答这个问题，答案是：

select: function( event , ui ) {
    alert( "You selected: " + ui.item.label );
}

完整示例：

$('#test').each(function(i, el) {
    var that = $(el);
    that.autocomplete({
        source: ['apple','banana','orange'],
        select: function( event , ui ) {
            alert( "You selected: " + ui.item.label );
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

在此输入水果：<input type="text" id="test" />

Answer 2

当自动填充更改某个值时，它会触发autocompletechange事件，而不是更改事件

$(document).ready(function () {
    $('#tags').on('autocompletechange change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
});

演示：小提琴

另一个解决方案是使用select事件，因为只有在输入模糊时才会触发更改事件

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('autocompleteselect', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

Answer 3

只需将$('#data').on('autocompleteselect', function (e, ui) { $('#d').html('You selected: ' + ui.item.label); });更改为{{1}}，如：

{{1}}

Answer 4

$(document).ready(function () {
    $('#tags').on('change', function () {
        $('#tagsname').html('You selected: ' + this.value);
    }).change();
    $('#tags').on('blur', function (e, ui) {
        $('#tagsname').html('You selected: ' + ui.item.value);
    });
});

尝试这个。

Answer 5

试试这种方式

<script>
             $(function() {
                $( "#data" ).autocomplete({
                 select: function (event, ui) {
                 $('#d').html('You selected: ' + ui.value);                    
                return false;
            }

                })

             });
      </script>

如何在jquery中获取所选的自动完成文本框值

5 个答案: