从自动完成输入框中获取所选字符串

Question

我正在构建一个表单，其中第一个字段（文本输入）是从MySQL表自动完成的，第二个字段（下拉列表）是由第一个字段中的选择填充的。自动完成工作正常，但我无法弄清楚如何从中获取所选择的选项;相反，我只得到我实际输入的搜索字符串（例如，'eggn'而不是我选择的'Eggnog'选项）;实际上，'onchange'函数会在所选选项复制到输入框之前触发。

真的很感激这个帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#name").autocomplete({
            source: 'getautocomplete.php',
            minLength: 2
        });
    });

    function ajaxfunction(key) {
        alert(key);
        $.ajax({
            url: 'get_units1.php?key=' + key,
            success: function (data) {
                $("#sub").html(data);
            }
        });
    }
</script>

<form method="post">
    <input type='text' id='name' onchange="ajaxfunction(this.value)">
    <select id="sub">
        <option value="">Choose the amount</option>
    </select>
    <input type='submit'>
    <input type='reset'>
</form>

Answer 1

为了启用自动完成功能，我使用了一个虚拟阵列作为自动完成的源。

如果我正确理解你的问题，绑定事件= select将比change更好。

以下代码的自动完成工作正常。您可以在代码片段中尝试测试用例，然后关注change和select触发事件的时间。

失焦后将触发事件= change。

选择一项自动完成项时，将触发事件= select。

更新：感谢@IncredibleHat的评论，我们应该在已经引用JQuery UI时摆脱onchange="onChangeAutocomplete(this.value)"。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    var availableTags = [ "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
    ];
    $(document).ready(function(){
        $("#name").autocomplete({
            source: availableTags,
            select: function( event, ui ) {
              console.log('[select]the string in autocomplete: ' + ui.item.label + '-' + ui.item.value);
            },
            //As the comment from @IncredibleHat, get rid of using old way to bind onchange.
            //follow the instructions of Jquery UI Autocomplete to bind the event like below
            change: function( event, ui) {
              console.log('[change1]the string in autocomplete: ' + ui.item.label + '-' + ui.item.value);
            }
        });
    });

    function onChangeAutocomplete(key)
    {
        console.log('[change2]the string in autocomplete: ' + key);
        /*$.ajax({
            url: 'get_units1.php?key=' + key,
            success: function(data) {
                $("#sub").html(data);
            }
        });*/
    }

    </script>

    <form method="post">
    <input type='text' id='name'" onchange="onChangeAutocomplete(this.value)">
    <select id="sub">
    <option value="">Choose the amount</option>
    </select>
    <input type='submit'><input type='reset'>
    </form>