在多个文本框上启用jQuery AutoComplete

时间:2018-07-12 18:14:45

标签: asp.net jquery-ui-autocomplete

我想在多个文本框中激活jQuery AutoComplete txtcitytxtcity2具有相同的功能,而没有添加用于第二个控件的第二个控件,下面是提供更多详细信息的代码。

 <asp:TextBox ID="txtcity" runat="server" class="form-control textupper" ></asp:TextBox>
  <asp:TextBox ID="txtcity2" runat="server" class="form-control textupper" ></asp:TextBox>

这是我的代码:

jQuery代码:

<script type="text/javascript">
        //On Page Load.
        $(function () {
            SetAutoComplete();
        });

        //On UpdatePanel Refresh.
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetAutoComplete();
                }
            });
        };
        function SetAutoComplete() {
            $("[id$=txtcity]").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: 'frm_cr_t.aspx/GetCities',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                };
                            }))
                        }
                    });
                }
            });
        }
    </script>

后面的代码:

<WebMethod()>
    Public Shared Function GetCities(prefix As String) As String()
        Dim cities As New List(Of String)()
        Using conn As New NpgsqlConnection()
            conn.ConnectionString = ConfigurationManager.ConnectionStrings("connauthentpg").ConnectionString
            Using cmd As New NpgsqlCommand()
                cmd.CommandText = "select distinct upper(lbl_ct) as lbl_ct from tbl_cit where upper(lbl_ct) like upper(:lbl_ct) order by lbl_ct "
                cmd.Parameters.Add("lbl_ct", NpgsqlDbType.Varchar)
                cmd.Parameters("lbl_ct").Value = "%" & prefix & "%"
                cmd.Connection = conn
                conn.Open()
                Using sdr As NpgsqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        cities.Add(String.Format("{0}", sdr("lbl_ct")))
                    End While
                End Using
                conn.Close()
            End Using
        End Using
        Return cities.ToArray()
    End Function

任何帮助都非常感谢您

1 个答案:

答案 0 :(得分:0)

我以前要做的是在两个输入中都添加一个类,然后使用它来运行

$(".theAutoCompleteClass").autocomplete

<asp:TextBox ID="txtcity" runat="server" class="form-control textupper theAutoCompleteClass" ></asp:TextBox>
<asp:TextBox ID="txtcity2" runat="server" class="form-control textupper theAutoCompleteClass" ></asp:TextBox>