0

I created a jquery combobox which even when I open it using the button I want it to close when clicking on the page body. I'm using jQuery v1.10.1 and jQuery UI v1.10.3. When I originally wrote it I was using v111 and I had an onclick in the body to close it but when I upgraded the auto-complete never stayed open. I tried to make a jfiddle http://jsfiddle.net/abakoltuv/Lmbdn/ but the button doesn't work at all.

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>

Thanks Aba

4

1 回答 1

0

I finally figured it out I just needed to focus on the text box after opening it.

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');
    }
}
于 2013-07-26T19:14:49.323 回答