jQuery Custom AutoComplete

Question

Я пытаюсь сделать предложение автозаполнения для стран, перечисленных в моей базе данных. Мне удалось получить список, и я пытаюсь связать событие click для записей для каждой страны. Хотя я считаю, что это способ сделать это, код всегда использует значение последнего элемента и помещает его в поле ввода.

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() в функции мыши.

Приняв это к примеру Джо (как это кажется более изящным):

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

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