JQuery Автозаполнение без раскрывающегося предложения

Question

У меня есть форма на моей странице, и я хотел добавить автозаполнение, чтобы предложить пользователю некоторые уже существующие имена

Когда я набираю текстовое поле ввода имени, я вижу в консоли, что оноизвлекает существующее имя, начиная с любой буквы, которую я набираю ... но я не вижу никакого раскрывающегося списка, чтобы выбрать предложение на веб-странице.Я что-то пропустил?Как получить выпадающий список предлагаемого автозаполнения?

<script src="{% static '/js/jquery-ui-1.12.1.min.js' %}"></script>
<script>
$(function() {
    $("#id_name").on('keyup', function(){
        var value = $(this).val();
        $.ajax({
        url: "{% url 'ajax-autocomplete' %}",
        data: {
          'search': value
        },
        dataType: 'json',
        success: function (data) {
            list = data.list;
            $("#id_name").autocomplete({
            source: list,
            minLength: 3
            });
        }
    });
  });
  });
</script>

Answer 1

Используйте datalist и заполните его динамически:

<input list="listName" id="inputName" type="text" autocomplete="off">
<datalist id="listName"></datalist>

Javascript:

$.ajax({
    url: '/api/my_api_url',
    dataType: 'json',
    success: function (jsonData) {
        $('#listName').empty();
        jsonData.forEach(function (person) {
            var option = document.createElement('option');
            option.value = person.name;
            $('#listName').append(option);
        });            
    }
});