javascript - JQuery 仅在满足特定条件时自动完成

Question

我正在为我的 .aspx 页面中的文本框使用 JQuery 自动完成功能。该页面包含一个下拉列表，用户可以从中选择几个不同的类别，并与一个文本框结合在一起，用户可以在其中输入搜索词。现在，问题是我只需要自动完成功能即可为其中一个类别选项工作。我的代码看起来像这样:.aspx:

<asp:DropDownList ID="DropDownList1" runat="server"  AutoPostBack="true" style="margin-left: 55px; margin-right: 10px;" Height="31px" >
               <asp:ListItem  Text="Name" Value="Name"></asp:ListItem>
               <asp:ListItem Text="JobTitle" Value="JobTitle"> </asp:ListItem>
                <asp:ListItem Text="City" Value="City"></asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"  ></asp:TextBox>

下拉菜单/文本框的代码:

void ResultsFilter()
{
    if (DropDownList1.SelectedValue.ToString() == "Name")
    {

        ObjectDataSource1.FilterExpression = "Name LIKE '%" + TextBox1.Text + "%' ";

    }
    else if (DropDownList1.SelectedValue.ToString() == "JobTitle")
    {

        ObjectDataSource1.FilterExpression = "JobTitle LIKE '%" + TextBox1.Text + "%' ";

    }
    else if (DropDownList1.SelectedValue.ToString() == "City")
    {

        ObjectDataSource1.FilterExpression = "City LIKE '%" + TextBox1.Text + "%' ";

    }
 }

以及用于自动完成的 Javascript:

<script type="text/javascript">
     $(function() {
        var availableTutorials = [

           "Director",
           "Broker",
           "Medical",
           "R&D",
           "Sales Executive",

        ];
         $("#TextBox1").autocomplete({
            minChars: 0,
            delay: 0,
            source: availableTutorials, minLength:0
        }).on('focus', function() { $(this).keydown();

        });

     });
  </script>

所以基本上我只希望在 (DropDownList1.SelectedValue.ToString() == "JobTitle") 应用时应用自动完成功能。不确定如何使用 Javascript/代码隐藏来执行此操作。非常感谢任何帮助!

Answer 1

你可以这样做:

if($('#<%= DropDownList1.ClientID %>').val() === 'JobTitle'){
    $("#<%= TextBox1.ClientID %>").autocomplete({ 
      // code
    });
}

您可以在焦点上初始化它，而不是加载:

$("#<%= TextBox1.ClientID %>").on("focus", function(){
  if($('#<%= DropDownList1.ClientID %>').val() === 'JobTitle'){
      $(this).autocomplete({ 
        // code
      });
   }
});