Question

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

 <system.diagnostics>
    <sources>
      <source name="System.ServiceModel" switchValue="Information, ActivityTracing" propagateActivity="true">
        <listeners>
          <add name="traceListener" type="System.Diagnostics.XmlWriterTraceListener" initializeData="c:\logs\TracesServ_ce.svclog" />
        </listeners>
      </source>
    </sources>
  </system.diagnostics>

我的JavaScript是：

 <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>

当我使用普通文本框而不使用任何CSS类时，它可以正常工作但它不能使用CSS。

Answer 1

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

<asp:TextBox ClientIDMode="Static"

另请查看代码检查器中生成的文本框。

其他明智的你可以试试这个：

   var places = new google.maps.places.Autocomplete(document.getElementById('<%= txt_DestinationRoute.ClientID %>'));

Answer 2

请在下面找到答案

UI

<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>

autosearch的Java脚本不适用于带CSS的文本框

2 个答案: