jquery - 我的文本框中选定的文本不是我所期望的

Question

我在我的网站上使用自动完成功能将选定的数据检索到下拉列表中。在该下拉列表中，我显示了名称和功能。但是，当我从下拉列表中选择一个项目时，文本框中显示的值不是我所期望的，如下所示，我选择“Antonio Moreno”，但所选值显示为 Antonio Moreno_Owner，这是我从中解析的值数据库。我想要的是在选择一个项目时只显示名称。我尝试添加“ $("[id$=txtSearch]").val(i.item.label.split('_')[0]);” 在 select: function (e, i) { 但它不起作用。（该示例中引用的数据库是 Northwind 数据库）

  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"> 
  </script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery- 
     ui.min.js"></script>
     <link rel="Stylesheet" type="text/css" 
     href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />
 <style type="text/css">
.labelText {
    color: red;
    float: left;
    font-family: Courier New;
    font-size: 10pt;
}

.valueText {
    float: right;
    background-color: aqua;
    font-family: Courier New;
    font-size: 10pt;
}

.dvDetails {
    padding: 5px;
    width: 235px;
    height: 30px;
}
</style>
<script type="text/javascript">
$(function () {
    $("[id$=txtSearch]").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/Default.aspx/GetCustomers") %>',
                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]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("[id$=hfCustomerId]").val(i.item.val);
        },
        minLength: 1
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        var div = $("<li>")
            .append("<a class='dvDetails'><span class='labelText'>" + item.label.split('_')[0] +
                "</span><span class='valueText'>(" + item.label.split('_')[1] + ")</span></a>")
            .appendTo(ul);
        return div;
    };;
});
</script>
 Enter search term:
<asp:TextBox ID="txtSearch" runat="server" />
<asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />

服务器上的代码是

<WebMethod()>
Public Shared Function GetCustomers(prefix As String) As String()
    Dim customers As New List(Of String)()
    Using conn As New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As New SqlCommand()
            cmd.CommandText = "select ContactName, CustomerId,ContactTitle from Customers where ContactName like @SearchText + '%'"
            cmd.Parameters.AddWithValue("@SearchText", prefix)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    customers.Add(String.Format("{0}-{1}", sdr("ContactName") & "_" & sdr("ContactTitle"), sdr("CustomerId")))
                End While
            End Using
            conn.Close()
        End Using
    End Using
    Return customers.ToArray()
End Function

标签： jqueryasp.netajax