jQuery Ui-输入标记中的自动完成和弹出窗口

Question

我想在一个输入标签中使用自动完成和弹出窗口。 但是自动完成功能无法显示，我看到谷歌浏览器开发人员工具，自动完成工作正常，无法显示。我不知道该怎么做。

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

    });     

}）;