如何在同一页面bootstrap -3上以2种不同的形式进行2次自动完成

Question

我在主页上有2个标签，两个标签都有自动填充功能的搜索表单，用于输入位置。

HTML

<div class="row">

                    <div class="col-md-4 scolleft">
                    <div class="bs-example bs-example-tabs cstyle04">

                <ul class="nav nav-tabs" id="myTab">
                    <li onclick="mySelectUpdate()" class="active"><a data-toggle="tab" href="#weekend"><span class="flight"></span> Weekend Holidays</a></li>
                    <li onclick="mySelectUpdate()" class=""><a data-toggle="tab" href="#holidays"><span class="hotel"></span>Holidays</a></li>

                </ul>

                <div class="tab-content2" id="myTabContent">
                    <div id="weekend" class="tab-pane fade active in">
                        <form action="" name = "weekend">
                        <div class="w50percent">
                            <div class="wh90percent textleft">
                                <span class="opensans size13"><b>Where</b></span>
                                <input type="text" name="location" class="form-control desktopDropDown autocomplete" id="location" />

                            </div>
                        </div>




                        <div class="clearfix"></div><br/>

                        <div class="w50percent">
                            <div class="wh90percent textleft">
                                <span class="opensans size13"><b>When</b></span>
                                <input type="text" class="form-control mySelectCalendar" id="datepicker" name="date" placeholder="mm/dd/yyyy"/>
                            </div>
                        </div>



                        <div class="clearfix"></div>
                        <div class="w50percent">
                                <input type="button"  class="btn-search3"  id="btnSearchHotels" name="btnSearchHotels" value="Search Hotels"   /></div>

                        </form>
                        </div>




                        <div id="holidays" class="tab-pane fade active in">
                        <form name = "holidays" action="">
                        <div class="w50percent">
                            <div class="wh90percent textleft">
                                <span class="opensans size13"><b>Where</b></span>
                                <input type="text" name="location" class="form-control desktopDropDown autocomplete" id="location" />

                            </div>
                        </div>




                        <div class="clearfix"></div><br/>

                        <div class="w50percent">
                            <div class="wh90percent textleft">
                                <span class="opensans size13"><b>When</b></span>
                                <input type="text" class="form-control mySelectCalendar" id="datepicker2" name="date" placeholder="mm/dd/yyyy"/>
                            </div>
                        </div>



                        <div class="clearfix"></div>
                        <div class="w50percent">
                                <input type="button"  class="btn-search3"  value="Search Holiday"   id="btnSearchHolidays" name="btnSearchHolidays"    />
                        </form>
                        </div>

                    </div>
                    </div>

自动填充在标签1中正常工作，但表单2的所有输入都显示错误。 我知道将id更改为autocomplete2但我不知道jquery / js来强制它。请告诉我们需要在哪些js文件中进行更改。 在此先感谢