jquery combobox將不會關閉，當點擊頁面

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'); 
    } 
}