javascript - 将所选(单击)选项传递到输入框

我有很多输入建议，但我无法使它们可点击。

<div class="search_native">
    <input type="text" name="native_input" id="native"/>
    <div id='output'></div>
</div>

$(document).ready(function() {
    $("input").keyup(function(){
        $array = ['usa','france','germany','italy','poland'];
        $input_val = $("input[name='native_input']").val();
        $('#output').text('')
        r = new RegExp($input_val)
        for (i = 0; i < $array.length; i++) {
            if ($array[i].match(r)) {
                $('#output').append('<p class="match">' + $array[i] + '</p>')
            }
        }
    });

    $('.match').click(function(e) {
        alert('df');
    });
});

我尝试检查是否单击了匹配项，但是没有。 alert()不会弹出。为什么？还有一个问题;如果我需要将clicked选项中的值放入输入框中，可以为它做类似的事情（当已经单击时）吗？

$value = $(this).val();
$('#native').val() = $value;

最佳答案

在运行$('.match')选择器时，没有匹配的元素，因为这是在页面加载后立即发生的。

您可以委派给父项或文档，因为这会在事件冒泡之后给事件加注：

$(document).on('click', '.match', function(){
    alert('df');
    $value = $(this).text();
    $('#native').val($value);
});

.val()语法需要新值作为参数。