Javascript autosearch的Java脚本无法使用CSS处理文本框

我想要一个带有自动搜索JavaScript的文本框。我的Aspx文本框是：

 <asp:TextBox ID="txt_DestinationRoute" runat="server" CssClass="form-control" placeholder="e.g. Route you followed" TextMode="MultiLine" Rows="2"></asp:TextBox>
  <asp:RequiredFieldValidator ValidationGroup="destinations" ID="rfvtxt_DestinationRoute" ControlToValidate="txt_DestinationRoute" Display="Dynamic" runat="server" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>

我的JavaScript是：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txt_DestinationRoute'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.A;
                var longitude = place.geometry.location.F;
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                //document.getElementById('lat').innerHTML = latitude;
                //document.getElementById('log').innerHTML = longitude;
                alert(mesg);
            });
        });
    </script>

google.maps.event.addDomListener（窗口'load'，函数（）{
var places=new google.maps.places.Autocomplete（document.getElementById（'txt_DestinationRoute'）；
google.maps.event.addListener（places，'place_changed'，函数（）{
var place=places.getPlace（）；
var address=place.formatted\u地址；
var latitude=place.geometry.location.A；
var经度=place.geometry.location.F；
var mesg=“地址：”+地址；
mesg+=“\n纬度：”+纬度；
mesg+=“\n长度：”+经度；
//document.getElementById（'lat'）。innerHTML=纬度；
//document.getElementById（'log'）。innerHTML=经度；
警报（mesg）；
});
});

当我在没有任何CSS类的普通文本框中尝试时，效果很好

---

但它不适用于CSS。

问题是asp为客户端生成不同的id，请尝试：

<asp:TextBox ClientIDMode="Static" 

---

请找到下面的答案

用户界面


鸟：
**剧本**
$（函数（）{
功能拆分（val）{
返回val.split（/，\s*/）；
}
功能提取最后（学期）{
返回拆分（term.pop（）；
}
//触发搜索事件的按钮侦听器
$（“#搜索触发器”）。单击（函数（）{
var searchTerm=$（“#鸟”）.val（）；
$（“#鸟”）。自动完成（“搜索”，搜索词）；
});
$（“鸟”）
.bind（“键控”，函数（事件）{
如果（event.keyCode===$.ui.keyCode.TAB&&
$（此）.data（“自动完成”）.menu.active）{
event.preventDefault（）；
}
})
.自动完成({
资料来源：[“lorem”、“ipsum”、“dolor”]，
/*将此注释掉以使用上面的虚拟数据
功能（请求、响应）{
$.getJSON（“search.php”{
期限：extractLast（request.term）
}，回应）；
},*/
搜索：函数（）{
var项=提取时间（此值）；
/*这张支票是做什么用的？
如果（术语长度<2）{
返回false；
}*/
},
焦点：函数（）{
返回false；
},
选择：功能（事件、用户界面）{
var术语=分割（此值）；
terms.pop（）；
术语推送（ui.item.value）；
术语。推送（“”）；
this.value=terms.join（“，”）；
返回false；
},
//添加了“全部显示”支持
最小长度：0
});
});
我对文本框css有问题，而不是脚本。。。。但感谢你的新方法这也是一个好方法谢谢你的反馈：）
   var places = new google.maps.places.Autocomplete(document.getElementById('<%= txt_DestinationRoute.ClientID %>'));

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" size="50" />
    <input type="button" id="search-trigger" value="Trigger" />
</div>


  **Script**

<script type="text/javascript">
$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    // Button listener that triggs the search event
    $("#search-trigger").click(function(){
        var searchTerm = $( "#birds" ).val();
        $( "#birds" ).autocomplete( "search" , searchTerm);
    });


    $( "#birds" )               
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: ["lorem", "ipsum", "dolor"], 
                /* Commented this out to use dummy data above
                            function( request, response ) {
                $.getJSON( "search.php", {
                    term: extractLast( request.term )
                }, response );
            },*/
            search: function() {
                var term = extractLast( this.value );

                          /* What is this check for?
                if ( term.length < 2 ) {


 return false;
                }*/
            },
            focus: function() {
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                terms.pop();
                terms.push( ui.item.value );
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            },
            //Added for "show all" support
            minLength: 0
        });
});
</script>