Edit in JSFiddle

$(function() {
				var Cities = [
					'Abu Dhabi',
					'Abuja',
					'Accra',
					'Amsterdam',
					'Addis Ababa',
					'Baghdad',
					'Baku',
					'Bamako',
					'Bangkok',
					'Beijing',
					'Cairo',
					'Canberra',
					'Caracas'
				];
				$('#dest').autocomplete({
					source: Cities,
					minLength: 2,
					select: function (event, ui) {
						$(this).val(ui.item.value);
						$('#temp_val').val(ui.item.value);
						$(this).blur();
						$(this).focus();
						//the second autocomplete
						var more=[
							ui.item.value + ' Accommodation',
							ui.item.value + ' Restaurants',
							ui.item.value + ' Sights',
							ui.item.value + ' Transport'
						];
						$('#dest').autocomplete({
							source: more,
							select: function (event, ui) {
								$(this).val(ui.item.value);
								$('#temp_val').val(ui.item.value);
							}
						});
					}
				});
				$('#dest').keypress(function(event){
					var dest = $.trim($('#dest').val());
					var temp_val = $.trim($('#temp_val').val());
					
					if(temp_val != ''){
						if(event.which != 32)
							$('#dest').autocomplete('option','source',Cities);
						else{
							var arr=[' Accommodation',' Restaurants',' Sights',' Transport'];
							var found_arr='';
							$.each(arr,function(index,value){
								if(temp_val.indexOf(value) >= 0){
									found_arr=value;
									return false;
								}
							});
							if(found_arr != '')
								temp_val=temp_val.replace(found_arr,'');
							var more=[
								temp_val + ' Accommodation',
								temp_val + ' Restaurants',
								temp_val + ' Sights',
								temp_val + ' Transport'
							];
							$('#dest').autocomplete('option','source',more);
						}	
					}
				});
			});

<div>
			<span><em><strong>City</strong></em></span>
			<br />
			<span><input type="text" id="dest" name="dest" value="" placeholder="Type the name of the city ... " /></span>
			<input type="hidden" id="temp_val" name="temp_val" value="">
		</div>