自动查询获取实时返回值 JavaScript JQuery on(),change(),trigger()

Django 环境，要实现一个input元素用于用户输入，以及一个空的select元素用于显示根据用户输入动态查询的结果，

需要结合前端JavaScript（或jQuery）和后端Django视图来完成。

JQuery的知识点：

• on()

• change() : 在 HTML 的 <select> 元素中，如果只有一个 <option> 或者当前选中的 <option> 已经是唯一存在的 <option>，那么从用户交互的角度来看，没有发生“改变”的行为，因此 change 事件不会被触发。

• trigger()

Django URL 配置

path('search/', project.search_view, name='search')

Django 视图

def search_view(request):
    query = request.GET.get('query', '')
    if query:
        # 有可能是多条记录 要用list()
        results = models.CustomerInfo.objects.filter(name__icontains=query).values('id', 'name')
        # return JsonResponse(list(results), safe=False)
        return JsonResponse({'status': True, 'datalist': list(results)})
    else:
        return JsonResponse([])

前端 HTML 和 JavaScript

<div class="form-group">
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" id="searchInput" placeholder="输入关键字">
        <div class="input-group-addon">
            <select id="resultsSelect" disabled></select>
        </div>
    </div>
</div>

<script>
    // 全局变量 赋值为最终选择的值
    var SEARCH_DATA;

    $(function () {
        // on 事件 选择实时查询事件
        bindSearchEvent();
        // change 事件 获得实时查询结果
        bindSearchValue();
    })

    // 实时查询 on
    function bindSearchEvent() {
        $('#searchInput').on('input', function () {
            var inputValue = $(this).val();
            // 当输入长度达到某个阈值时开始查询，例如1个字符
            if (inputValue.length > 1) {
                $.ajax({
                    url: '{% url 'search' %}',
                    type: 'get',
                    data: {'query': inputValue},
                       success: function (res) {
                    if (res.status) {
                        // 清空select，移出 disabled
                        $('#resultsSelect').empty().prop('disabled', false);
                        console.log(res.datalist);
                        $.each(res.datalist, function (index, item) {
                            console.log(index+'...'+ item.id + '....' + item.name);
                            $('#resultsSelect').append($('<option>', {
                                value: item.id,
                                text: item.name,
                            }));
                            // 在 HTML 的 <select> 元素中，
                            // 如果只有一个 <option> 或者当前选中的 <option> 已经是唯一存在的 <option>，
                            // 那么从用户交互的角度来看，没有发生“改变”的行为，因此 change 事件不会被触发。
                            // trigger 方法 强制触发 change 方法
                            if($('#resultsSelect option').length >= 1){
                                $('#resultsSelect').val(item.id).trigger('change');
                            }
                        })
                    } else {
                        // 如果没有结果，再次禁用select元素（可选）
                        $('#resultsSelect').prop('disabled', true);
                    }
                }
            })
        } else {
			$('#resultsSelect').empty(); // 如果没有输入，也清空select
    }
    })
    }
    // change 事件实时查询的结果		
    // 当 select 元素 的 option 只有一个值时，没有“改变”的行为，change 不会执行
    // 这里使用了 trigger() 强制触发 change 方法
    function bindSearchValue() {
        $('#resultsSelect').change(function () {
            console.log('调试语句,检查 change 是否执行');  // 调试语句
            SEARCH_DATA = $(this).val();
            console.log("当前选中值是："+ SEARCH_DATA);
        })
    }
</script>