jquery-ui - jQuery Ui-Autocomplete と入力タグのポップオーバー

Question

1 つの入力タグでオートコンプリートとポップオーバーを使用したい。しかし、オートコンプリートは表示できません。Google Chrome 開発者ツールが表示されます。オートコンプリートは機能しますが、表示できません。やり方がわかりません。

HTMLコード

<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 コード

$(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')),

    });     

});