jquery - jquery自动完成下拉列表以在点击时填充

Question

我正在使用 jquery 自动完成来填充下拉列表。

<script type="text/javascript"> 
$(document).ready(function () {

    $("#area").autocomplete( 
     { 

     source: "get_areas", 
     messages: 
     { 
     noResults: '', 
     results: function() {} 
     }, 
     select: function( event, ui ) 
         { 
          var selectedObj = ui.item; 
          var selectedobjectorder = selectedObj.value
          var substr = selectedobjectorder.split(': ');
          $('input[name^="selectedarea"]').val(substr[0]);
          var area=substr[0];

                  //get table data from DB
                  $.post("get_find_demand_all", { vararea:area, varperiod: $('#period').val()}).done(function(data) { 
                    $('#results').html(data);
                  }); 
         }
     });
});
</script>

这可以根据需要 100% 工作。我想要的是在单击下拉列表时还使用所有选项填充下拉列表。

目前用户必须输入一个字符串来触发人口。是否可以在单击时使用所有条目填充该字段？过滤下拉列表，然后用户可以输入一些字符串并用结果重新填充下拉列表？

我的数据库查询get_areas有效： select distinct(area) from customer_address where area like %inserted string%

SQL 确实返回所有行like '%%'

我该如何为此修改jquery？

谢谢并恭祝安康，

Answer 1

可以使用搜索方式手动触发搜索

注意：您需要将minLength选项设置为，0否则默认搜索将不起作用

$(document).ready(function () {

    $("#area").autocomplete({ 
        minLength: 0,
        source: "get_areas", 
        messages: 
        { 
            noResults: '', 
            results: function() {} 
        }, 
        select: function( event, ui ) 
        { 
            var selectedObj = ui.item; 
            var selectedobjectorder = selectedObj.value
            var substr = selectedobjectorder.split(': ');
            $('input[name^="selectedarea"]').val(substr[0]);
            var area=substr[0];

            //get table data from DB
            $.post("get_find_demand_all", { vararea:area, varperiod: $('#period').val()}).done(function(data) { 
                $('#results').html(data);
            }); 
        }
    }).click(function(){
        $(this).autocomplete('search', '')
    });
});

Answer 2

尝试添加这个

jQuery('#area').click(function(){
        jQuery(this).val('');
        jQuery(this).keydown();
    });