jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

jQuery Autocomplete can't display dropdown result (two autocomplete) after changing keyword

I have one jquery ui autocomplete input that I would like to show another dropdown after another. For example : If I type two characters of the city name like ba, it would display a dropdown contained : Addis Ababa, Baghdad, Baku, Bamako and Bangkok. If I pick one of them (Bangkok) and press a spacebar, another dropdown (at the same input box) would be displayed : Bangkok Accommodation, Bangkok Restaurants, Bangkok Sights, and Bangkok Transport. I can do this but only for the first time. When I change the keyword, the dropdown fail to be displayed. Here is the script :

<html> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script type="text/javascript"> $(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); $(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); } }); } }); }); </script> </head> <body> <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> </div> </body> </html>
I dont want to use another input box for this.