autocomplete appendTo

by Joel Ferreira

HTML

<script src="http://www.devbridge.com/scripts/libs/jquery.autocomplete.js"></script>
<div data-role="page" id="Main">

    <!-- TakeaCity -->
        <div id="Content-TakeaCity" class="Content">
        
            <br/>
<br/>
<br/>
<br/>
<br/>
<br/>
    <br/>
    <br/>
    <br/>
<div id="CityFrom" class="SubItemEdit Hide" data-CityIDCountryID="">
                <div class="SubItemLabel">From</div>
                <div class="SubItemField">
                    <input id="inputCityFrom" type="text" value="" />
                </div>
            </div>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
<br/>
    <br/>
    <br/>
    <br/>
            
        </div>

CSS

.SubItemEditDoc {
	background: white;
	margin: 3px;
	border: 2px solid orange;
	border-radius: 5px;
	padding: 0px;
	overflow: hidden;
	cursor: pointer;
}

.SubItemLabel {
	float:left;
	background: white;
	margin: 3px;
	border: 0px;
	font-size: 18px;
	padding: 5px;
	min-width: 150px;
}

.SubItemField {
	float:left;
	background: white;
	margin: 3px;
	border: 0px;
	font-size: 18px;
	padding: 0px 0px 0px 0px;
}

.Content {
	position: absolute;
	top: 70px;
	bottom: 0px;
	width: 100%;
	overflow-y: scroll;
	padding: 0px 0px 0px 0px;
	background: #FFFFFF;
}

.autocomplete-suggestions { border: 1px solid #999; background: #fff; overflow-y: scroll; }
.autocomplete-suggestion { padding: 10px 5px; font-size: 1em; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #f0f0f0; }
.autocomplete-suggestions strong { font-weight: bold; }

JavaScript

var cityCountry = [{"value": "porto", "data":2},{"value": "lisboa", "data":1},{"value": "portalegre", "data":3},{"value": "porto", "data":2},{"value": "lisboa", "data":1},{"value": "portalegre", "data":3},{"value": "porto", "data":2},{"value": "lisboa", "data":1},{"value": "portalegre", "data":3},{"value": "porto", "data":2},{"value": "lisboa", "data":1},{"value": "portalegre", "data":3}];

$('#inputCityFrom').autocomplete({
                lookup: cityCountry,
                onSelect: function (suggestion) {
                    $('#CityFrom').attr("data-CityIDCountryID", suggestion.data);            
                },
    appendTo: $("#CityFrom .SubItemField")
              });