jQuery UI Combobox issues

HTML

<script src="http://mjf.me/Random/jquery-ui-combobox.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css">
  <select  id="combobox" >
    <option>abc</option>
    <option>deg</option>
    <option>gcc</option>
    <option>gă…‡c</option>
  </select>
  
  <input type="text" id="addfieldtoddl" /><input type="button" value="add" id="add" onclick="addfieldtoddl()" />
  
  <script>
  $(document).ready(function(){
			$("#combobox").combobox();
  });
    function addfieldtoddl() {
    	var YourValue = $("#addfieldtoddl").val();
    	$('#combobox').append('<option val="'+ YourValue +'">'+ YourValue +'</option>');
      $("#combobox").combobox();
    }
  </script>

CSS

body {margin: 0px; padding: 0px;}
.container 
{    
    position: relative;
    float: right;    
}
.body {
    width: 232px;    
    position: absolute;
    top: 30px;
    right: 0px;    
    border: 1px solid #231F20;    
    border-radius: 10px;
    background: #ADAFB2;    
    color: #58595B;
    font-family: 'Ubuntu', sans-serif;    
}
.controlContainer {
    font-weight: bolder;    
    font-size: 15px;
}
.subControl {
    margin-top: 5px;
    border-top: 2px solid #DCDDDE;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 5px;
}
.control {
    margin: 10px auto;
    max-width: 215px;
}

.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; width: 140px; }
ul.ui-widget {font-size: 0.7em;}
input.ui-widget {font-size: 0.7em;}
button.ui-widget {font-size: 0.7em;}
.ui-menu { max-height: 200px; overflow-y: auto;}