jquery combobox wont close when clicking on page - jquery-ui

Question

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">▼</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

Answer 1

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