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);
        });            
    }
});

jQuery自动完成功能没有下拉建议

1 个答案: