C# jQuery自动完成多个输出

我正在使用jqueryautocomplete根据输入的值从数据库中获取结果。然后，用户将单击一个搜索按钮，告诉页面搜索该特定条目的详细信息

我想得到两个值，名称和标题。我只想向用户显示名称，而页面使用标题作为搜索条件

例如：当一个人键入车辆时，结果将在列表中显示

Vehicle1、Vehicle2

。
当用户单击

Vehicle1

时，将出现一个带有标题的隐藏框，该标题将是

Bike

，例如

Vehicle2

，该标题将发出带有

Car

的隐藏框

我可以将名称正确地显示在文本框中，但我无法将标题绑定到一个隐藏框中

JavaScript:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".tb").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "AutoComplete.asmx/FetchEmailList",
                        data: "{ 'prefix': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    //value: item.Title,
                                    label: item.Name
                                };
                            }));
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2
            });
        });
    </script>

$（文档）.ready（函数（）{
$（“.tb”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“AutoComplete.asmx/FetchEmailList”，
数据：“{'前缀'：'”+request.term+“}”，
数据类型：“json”，
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
dataFilter:函数（数据）{返回数据；}，
成功：功能（数据）{
响应（$.map）（数据.d，函数（项）{
返回{
//值：item.Title，
标签：项目名称
};
}));
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（文本状态）；
}
});
},
最小长度：2
});
});

ASPX代码：

<div class="ui-widget" >
    <asp:TextBox ID="tbAuto" class="tb" runat="server">
    </asp:TextBox>
    <asp:TextBox runat="server" ID="tbHidden" class="tb"></asp:TextBox>
</div>

代码隐藏：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Employee> FetchEmailList(string prefix)
{
    var emp = new Employee();
    var fetchEmail = emp.GetEmployeeList(prefix)
    .Where(m => m.Name.ToLower().StartsWith(prefix.ToLower()));
    return fetchEmail.ToList();
}    
}

[WebService（命名空间=”http://tempuri.org/")]
[WebServiceBinding（ConformsTo=WsiProfiles.BasicProfile1_1）]
[脚本服务]
公共类自动完成：System.Web.Services.WebService
{
[网络方法]
[ScriptMethod（ResponseFormat=ResponseFormat.Json）]
公共列表FetchEmailList（字符串前缀）
{
var emp=新员工（）；
var fetchEmail=emp.GetEmployeeList（前缀）
.Where（m=>m.Name.ToLower（）.StartsWith（prefix.ToLower（））；
返回fetchEmail.ToList（）；
}    
}

CompletionClass：（请原谅命名）

公共类员工
{
公共字符串标题{get；set；}
公共字符串名称{get；set；}
公共字符串值{get；set；}
公共列表GetEmployeeList（字符串前缀）
{
List cmpList=新列表（）；
SqlConnection db=DataConn.SqlConnection（）；
db.Open（）；
SqlTransaction=db.BeginTransaction（）；
//var array=new ArrayList（）；
尝试
{
SqlCommand command=new SqlCommand（“从vwGetDetails中选择[something]，其中[something\u else]如N“%”“+prefixText+“%”按[thatOther\u thing]ASC、db、事务排序）；
使用（SqlDataReader=command.ExecuteReader（））
{
while（reader.Read（））
{
cmpList.Add（new Employee（）{Name=reader[“Value1”].ToString（），Title=“Value1_Cat”，value=“Value1_Cat”}）；
}
}
command=new-SqlCommand（“从[某处]选择[something]，其中[thingy]类似于N“%””+prefixText+“%”按[previousThingy]ASC、db、transaction排序）；
使用（SqlDataReader=command.ExecuteReader（））
{
while（reader.Read（））
{
cmpList.Add（new Employee（）{Name=reader[“Value2”].ToString（），Title=“Value2_Cat”，value=“Value2_Cat”}）；
}
}
Commit（）；
}
捕获（SqlException）
{
transaction.Rollback（）；
添加（newemployee（）{Name=“获取结果时出现问题。”，value=“Error”}）；
//Add（“获取结果时出现问题”）；
}
如果（cmpList.Count==0）
添加（新员工（）{Name=“无需显示。”，value=“Info”}）；
//Add（“无需显示”）；
//返回数组；
返回cmpList；
}
}

对JavaScript的这些修改应该可以实现以下目的：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input[name$="tbAuto"]').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "AutoComplete.asmx/FetchEmailList",
                    data: "{ 'prefix': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 2,
            focus: function(event, ui) {
                $('input[name$="tbAuto"]').val(ui.item.Name);
                return false;
            },
            select: function(event, ui) {
                $('input[name$="tbAuto"]').val(ui.item.Name);
                $('input[name$="tbHidden"]').val(ui.item.Title);
                return false;
            }
        }).data('autocomplete')._renderItem = function(ul, item) {
            return $('<li>').data('item.autocomplete', item).append('<a>' + item.Name + '</a>').appendTo(ul);
        };
    });
</script>

$（文档）.ready（函数（）{
$（'input[name$=“tbAuto”]'）。自动完成({
来源：功能（请求、响应）{
$.ajax({
url:“AutoComplete.asmx/FetchEmailList”，
数据：“{'前缀'：'”+request.term+“}”，
数据类型：“json”，
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
dataFilter:函数（数据）{返回数据；}，
成功：功能（数据）{
答复（数据d）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（文本状态）；
}
});
},
最小长度：2，
焦点：功能（事件、用户界面）{
$（'input[name$=“tbAuto”]'）.val（ui.item.name）；
返回false；
},
选择：功能（事件、用户界面）{
$（'input[name$=“tbAuto”]'）.val（ui.item.name）；
$（'input[name$=“tbHidden”]'）.val（ui.item.Title）；
返回false；
}
}).data（'autocomplete'）。\u renderItem=函数（ul，it
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input[name$="tbAuto"]').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "AutoComplete.asmx/FetchEmailList",
                    data: "{ 'prefix': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 2,
            focus: function(event, ui) {
                $('input[name$="tbAuto"]').val(ui.item.Name);
                return false;
            },
            select: function(event, ui) {
                $('input[name$="tbAuto"]').val(ui.item.Name);
                $('input[name$="tbHidden"]').val(ui.item.Title);
                return false;
            }
        }).data('autocomplete')._renderItem = function(ul, item) {
            return $('<li>').data('item.autocomplete', item).append('<a>' + item.Name + '</a>').appendTo(ul);
        };
    });
</script>