只有满足特定条件时,JQuery才会自动完成

本文关键字:JQuery 满足 特定条件 | 更新日期: 2023-09-27 18:25:35

我正在使用JQuery自动完成.aspx页面中的文本框。该页面包含一个下拉列表,用户可以从中选择几个不同的类别,并与一个文本框组合在一起,用户可以在其中输入搜索词。现在,问题是我只需要自动完成就可以为其中一个类别选项工作。我的代码如下所示:.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/Code实现这一点。非常感谢您的帮助!

只有满足特定条件时,JQuery才会自动完成

您可以这样做:

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

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

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