javascript - jQuery 自定义自动完成

Question

我正在尝试为我的数据库中列出的国家/地区提出自动完成建议。我设法获取列表，并尝试为每个国家/地区的条目绑定(bind)点击事件。尽管我相信这是这样做的方法，但代码始终使用最后一项的值并将其放置到输入字段。

Suggestions 是我的自动完成容器，我要更新的文本字段是 box。

$('#box').on('input', function (){
   var typedLocation = { 'location' : $(this).val() };
   var key;

   $.post( "/suggestions.php", typedLocation, function( data ) {

       $('#Suggestions').html('').show();
       for (key in data) {
            $('#Suggestions').append('<div id="suggest' + key + '" >' + data[key] + '</div>');

            $('#Suggestions').find('#suggest' + key).click(function (){
                $('#Suggestions').hide();
                $('#box').val(data[key]);
            });
       } 
   });
});

Answer 1

我没有使用变量来设置输入字段的值，而是在点击函数中使用了 $(this).html() 。

采用 Joe 的示例(因为它看起来更优雅):

var $elem = $('<div>' + data[key] + '</div>');

$elem.click(function () {
            $('#Suggestions').hide();
            $('#box').val($(this).html());
        });
$('#Suggestions').append($elem);