在选择 JQuery 自动完成项时使用 SQL 数据填充字段

Question

我有一个包含姓氏、名字和电子邮件的输入表单。我不想在文本框中键入并单击提交以在 DB-2 中创建记录，而是想使用 jQuery 自动完成搜索另一个现有数据库 DB-1 并从那里的表中提取用户信息。因此，当我单击自动完成选项时，它应该用它们的信息填充三个文本框，这样当我单击提交时，它将在 DB-2 中创建一条记录，其中的数据与 DB-1 中的数据一致。

目前我的输入字段和提交按钮适用于 DB-2。我可以手动输入姓氏、名字和电子邮件，当我单击提交时，记录会添加到 DB-2。我也有自动完成功能，这样我就可以扫描 DB-1 中的表并选择一条记录。但是我不确定如何填充这些输入字段。我想它一定是这样的jQuery autocomplete documentation example。但是，不仅需要我选择的内容，我还需要与该选择相关的其他几列。这是我现在的代码。

<form method="post">      
        @Html.TextBox("lastName", Request.Form["lastName"], new { maxlength = 50 })
        @Html.TextBox("firstName", Request.Form["firstName"], new { maxlength = 50 })
        @Html.TextBox("email", Request.Form["email"], new { maxlength = 50 })
        <p><input type="submit" name="btnSubmit" value="Assign Reader" /></p>
</form>

这是我的小部件代码：

<div class="ui-widget">
        <input id="fullname" name="fullname" placeholder="Search by Name" size="50">
</div>

   List<string> LastNames = new List<string>();
    foreach (var item in db1.Query("SELECT * FROM myTableInDB1; "))
    {
        var LName = item.LastName;
        var FName = item.FirstName;
        var eMail= item.email;           
        var FullName = LName + ", " + FName;
        FullNames.Add(FullName);
    }    
<script>
    $(function () {
        function log( message ) {

<<note: this is where the jQuery example has the selection posted 
 to a log. I can do that but just with the FullName data. I'm not 
 sure what happens to the other data in the above foreach.>>

        }
        var FullNames = @Html.Raw(Newtonsoft.Json.JsonConvert
                      .SerializeObject(FullNames.ToArray()));
        $("#fullname").autocomplete({
            source: FullNames,

<<note: I also added this bit in to test that my selection 
 was getting posted to the log window>>

            select: function( event, ui ) {
            log( ui.item ?
              ui.item.value : this.value );
        }
        });
    });
</script>

再说一次，我如何使用自动完成功能来搜索我需要的记录，然后一旦选择它，当我只将 (FullName) 拉入我的自动完成数组时，收集 LName、FName 和 eMail 的所有这些变量值。

我是否需要使用选择来对 db-1 进行另一个查询，然后将这些返回添加到文本框中？如果我从自动完成中获得选择的 id，我可以这样做，但我不知道如何获得它。

如果有办法在 foreach 过程中提取这些值，那就更好了。

我准备复制一些在 gridview 中返回查询结果的代码，然后我可以使用 gridview 选择填充文本字段。但是，如果可以以某种方式连接此自动完成功能，它会在页面上看起来更清晰。提前感谢您对此提出的建议。 --蒂姆

Answer 1

目前，您的自动完成源是一个名称数组。但是您想填充所选选项的名字、姓氏和电子邮件。因此，首先，我们需要将源数据从简单的名称数组更改为对象数组，其中每个对象都将具有 FirstName、LastName 和 Email 属性。

@{
   var db=new MyDb();
   var userList = db.Users.SqlQuery("SELECT * from Users")
                          .Select(f => new { FirstName = f.FirstName, 
                                             LastName = f.LastName, 
                                             Email = f.Email,  
                                             value = f.FirstName+" "+ f.LastName}).ToList();

}

假设您的 Users 表有 FirstName、LastName 和 Email 字段。

现在使用这个对象数组作为源，在 select 事件中，获取选中的项目（对象）并读取 FirstName,LastName & Email 属性值并设置为输入字段。

@section scripts
{
    <script>

        $(function () {
           var userArray = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(userList));

           $("#fullname").autocomplete({
                source: userArray,
                select: function( event, ui ) {                       
                    $("#firstName").val(ui.item.FirstName);
                    $("#lastName").val(ui.item.LastName);
                    $("#email").val(ui.item.Email);
                }
           });
        });

    </script>
}