jQuery UI Combobox issues

by Nibin George

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css">
<script src="http://mjf.me/Random/jquery-ui-combobox.js"></script>
<div class="document">
<a class="ajax" href="#">Fire an AJAX request</a>
</div>
<div class="dynamicBlock"></div>
<div class="tett" style="display:none">
    <select id="combobox">
                        <option value="">Select one...</option>
                        <option value="23">Really long stuff that might wrap</option>
            <option value="25">Normal Stuff</option>
                                    <option value="31">my service (Awesome)</option>
                                    <option value="38">Test 7</option>
                                    <option value="40">My Service 2</option>
                                    <option value="41">Here is something pretty big again</option>
                                    <option value="42">Why isn't there a max width property on this</option>
                                    <option value="43">Transfer</option>
                                    <option value="44">There has to be a lot of items to illustrate this problem</option>
                                    <option value="46">Test 8</option>
                                    <option value="47">Test 9</option>
                                    <option value="48">TEST TEST TEST</option>
                                    <option value="70">Test 11</option>
                                    <option value="72">Test 12</option>
                                    <option value="73">Test 13</option>
                                    <option value="74">Test 14</option>
                                    <option value="75">Test 15</option>
                                    <option value="76">Test 16</option>
                                    <option value="77">Test 17</option>
                                    <option value="97">This is...

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

JavaScript

$(function() {

    $('.document').on('click', '.ajax', function(e) {
        e.preventDefault();
        $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is echoed the response in HTML format</p>',
            },
            dataType: 'html',
            success: function(data) {
               var content = $('.tett').html();
                $('body').append(content);
                $("select").combobox("destroy"); //try commenting it
                $("select").combobox();
                
            }
        });

    });

});