Question

我创建了一个jquery组合框，即使我使用按钮打开它，我希望它在单击页面主体时关闭。我正在使用jQuery v1.10.1和jQuery UI v1.10.3。当我最初写它时，我使用的是v111，我在机身上有一个onclick来关闭它，但是当我升级时，自动完成从未保持打开状态。我试图制作一个jfiddle http://jsfiddle.net/abakoltuv/Lmbdn/，但按钮根本不起作用。

local css:
.textbox, input.combobox {
    border: 1px solid #666666;
    color: black;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}
span.combobox {
    border-bottom: 1px solid #666666;
    border-right: 1px solid #666666;
    border-top: 1px solid #666666;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    height: 8px;
    padding: 2px 2px 4px;
    position: relative;
    top: 1px;
    width: 10px;
}
<b>Brand</b><br /> 
<input type="text" onChange="setChangedFlag()" field="BRAND_ID" value="" id="BRAND_ID_display" name="BRAND_ID_display" size="22" class="combobox" style="width: 121px;"><span onClick="click_combobox_open('BRAND_ID_display')" class="combobox">&#9660;</span>
<br /><input type="text" value="" id="BRAND_ID" name="BRAND_ID" style="background-color:#CCCCCC" class="textbox" size="22">
<script language="javascript" type="text/javascript">
<!--

$(document).ready(function() {
    setup_combobox();
}); 
function setup_combobox()
{
    var largest_size;
    var data = [{"id":"1","value":"Able Planet"},{"id":"86","value":"Able Planet 123"},{"id":"2","value":"Acecad"},{"id":"3","value":"Action Life Media"},{"id":"4","value":"Adobe"},{"id":"5","value":"Bose"},{"id":"6","value":"Canon"},{"id":"7","value":"Delkin"}];
    $("input.combobox").autocomplete({
        html: 'html',
        minLength: 0,
        source: data ,
        select: function(event, ui) {
            if (ui.item) {
                var width1 = $('#'+this.id).width();
                $('#'+this.id).width((ui.item.value.length * 2/3) + 'em');
                var width2 = $('#'+this.id).width();
                if(width1 > width2)
                    $('#'+this.id).width(width1);
                $('#'+this.id.substring(0, this.id.length - 8)).val(ui.item.id); 
            };
        }
    });
}

function click_combobox_open(display_ID)    
{
    var width1 = $('#'+display_ID).width();
    $('#'+display_ID).width(($('#'+display_ID).val().length * 2/3) + 'em');
    var width2 = $('#'+display_ID).width();
    if(width1 > width2)
        $('#'+display_ID).width(width1);
    else    
        $('#'+display_ID).width(width2);    
    if(!$('#'+display_ID).autocomplete('widget').is(':visible'))
    {
        $('#'+display_ID).autocomplete('search','');
    }
    else        
    {
        $('#'+display_ID).autocomplete('close');
    }
}
//-->
</script>

由于阿巴

Answer 1

我终于明白了，打开它之后我只需要专注于文本框。

function click_combobox_open(display_ID)    
{
    var width1 = $('#'+display_ID).width();
    $('#'+display_ID).width(($('#'+display_ID).val().length * 2/3) + 'em');
    var width2 = $('#'+display_ID).width();
    if(width1 > width2)
        $('#'+display_ID).width(width1);
    else    
        $('#'+display_ID).width(width2);    
    if(!$('#'+display_ID).autocomplete('widget').is(':visible'))
    {
        $('#'+display_ID).autocomplete('search','');
        **$('#'+display_ID).focus();**
    }
    else        
    {
        $('#'+display_ID).autocomplete('close');
    }
}

点击页面时，jquery combobox不会关闭

1 个答案: