Question

我有一个asp.net Web表单，用作用户构建sql查询的前端。表单上有一个使用jQuery自动完成的文本框。

表单还有一个单选按钮列表，选择一个单选按钮可以更改自动完成的数据源。

一旦用户在文本框中选择了一个选项，他们会单击一个按钮将该选项添加到他们正在构建的查询中，添加的选项将显示在不同的文本框中。

但是，当单击此添加按钮时，文本框将丢失其所有自动完成建议值。

我认为这与发布回来有关，但我无法弄明白。我知道一个潜在的解决办法是让数据源在按钮点击时再次填充，但由于数据源中有几千条记录，这需要几秒钟，我不想破坏用户体验。

非常感谢任何帮助。

的JavaScript

$(function() {
    var availableValues = [ <%= codes %> ];
        $( ".autocompleteMe" ).autocomplete({
            minLength:3,
            source: availableValues
        });
});

单选按钮列表用于更改自动填充数据源的单选按钮列表

<asp:RadioButtonList ID="rbList" runat="server" RepeatLayout="Flow" OnSelectedIndexChanged="list_changed" AutoPostBack="true" >
    <asp:ListItem onclick="ShowLoading()">item1</asp:ListItem>
    <asp:ListItem onclick="ShowLoading()">item2</asp:ListItem>
    <asp:ListItem onclick="ShowLoading()">item3</asp:ListItem>
    <asp:ListItem onclick="ShowLoading()">item4</asp:ListItem>
</asp:RadioButtonList>

C＃更改所选单选按钮时运行的代码

public string codes = "";

    protected void list_changed(Object sender, EventArgs e)
    {
        //Remove all the current values from codes string
        codes = "";

        //Wipe the codes text boxes to ensure there is no codes passed in from previous queries
        txtCode.Text = "";
        txtCodeList.Text = "";

        //Get the value of the selected radio button and assign it for use in the query string
        string choice= rbList.SelectedValue;

        string queryString = string.Format("select description from codes where category = '{0}'",choice);
        using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString))
        using (SqlCommand command = new SqlCommand(queryString, connection))
        {
            connection.Open();
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    if (string.IsNullOrEmpty(codes))
                    {
                        codes+= "\"" + reader["description"].ToString() + "\"";
                    }
                    else
                    {
                        codes += ", \"" + reader["description"].ToString() + "\"";
                    }
                }
            }
        }       

    }

文本框两个文本框，txtCode是自动完成，txtCodeList在点击按钮上存储选定的代码

<div class="input-group" style="padding-bottom: 10px;">
    <asp:TextBox ID="txtCode" runat="server" type="text" class="form-control autocompleteMe" />
    <span class="input-group-btn">
        <asp:Button ID="btnAddCode" runat="server" class="btn btn-default" type="button" Text="Add" OnClick="btnAddCode_Click"  Width="75px" />
    </span>
</div>

<div class="input-group">
    <asp:TextBox ID="txtCodeList" runat="server" CssClass="form-control" type="text" required Enabled="false" Text="" />
    <span class="input-group-btn">
        <asp:Button ID="btnRemoveCode" runat="server" class="btn btn-default" type="button" Text="Remove" OnClick="btnRemoveCode_Click" Width="75px" />
    </span>
</div>

在添加按钮上运行的C＃单击此按钮单击会导致文本框txtCode从自动完成中丢失其建议值

protected void btnAddCode_Click(object sender, EventArgs e)
{
    if (txtCodeList.Text == "")
    {
        txtCodeList.Text = txtCode.Text;
    }
    else
    {
        txtCodeList.Text = txtCodeList.Text + "," + txtCode.Text;
    }
        txtCode.Text = "";
}

按钮单击时，jQuery UI自动完成值消失

0 个答案: