点击时填充的jquery自动完成下拉列表

时间:2013-05-29 13:36:30

标签: jquery autocomplete click

我正在使用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?

谢谢和问候,

2 个答案:

答案 0 :(得分:2)

您可以使用search方法手动触发搜索

注意:您需要将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', '')
    });
});

答案 1 :(得分:0)

尝试添加此

jQuery('#area').click(function(){
        jQuery(this).val('');
        jQuery(this).keydown();
    }); 
相关问题