自动查询获取实时返回值 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();})// 实时查询 onfunction 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>
