jQuery Ui-Autocomplete and popover in input tag

Question

I want to use autocomplete and popover in one input tag. But autocomplete can't display , I see google chrome developer tools, autocomplete is work, just can't display . I don't know how to do .

HTML code

<span class="form-labelTitle img-searchForm02">place</span>
<input class="auto-input" placeholder="city" data-toggle="popover" data-placement="bottom">
    <div class="leave-btn"></div>                       
    <div class="autocomplete-div auto1"></div>
    <div id="popover-content" class="hide">
    <div role="tabpanel">
    <ul class="nav nav-tabs arrival-tabs" role="tablist" id="myTab">
     <li class="active" role="presentation" ><a href='#JPN' role='tab' data-toggle='tab'>japan</a></li>
     <li role="presentation" ><a href='#TPE' role='tab' data-toggle='tab'>taiwan</a></li>

    </ul>

       <div class="tab-content">                                
       <div class='tab-pane active city' id='JPN'>
              <span>Tokyo</span>
              <span>okinawa</span>
       </div>
       <div class='tab-pane' id='TPE'>
              <span>taipei</span>
       </div>

JS code

$(function(){

$('.auto-input').popover({

    'html': true,
    'content': function () {
        return $('#popover-content').html();
    }
});
$('.auto-input').autocomplete({
    open:function(event, ui){
        $(this).popover('hide');            
    },
    source: [
               "tokyo",
               "okinawa",
               "taipei                   
             ],
   appendTo:($('.auto1')),

    });     

});