在选择JQuery自动完成项时用SQL数据填充字段
本文关键字:SQL 数据 字段 填充 JQuery 选择 | 更新日期: 2023-09-27 18:03:54
我有一个包含姓、名和电子邮件的输入表单。我不想在文本框中键入并单击submit以在DB-2中创建记录,而是想用jQuery自动完成搜索另一个现有数据库DB-1,并从那里的表中提取用户信息。因此,当我单击自动完成选项时,它应该用它们的信息填充三个文本框,这样当我单击提交时,它将在DB-2中创建一条记录,其中的数据与DB-1中的数据一致。
目前我有输入字段和提交按钮为DB-2工作。我可以手动键入姓、名和电子邮件,当我单击提交时,记录被添加到DB-2。我也有自动完成工作,这样我就可以扫描DB-1中的表并选择一条记录。但是,我不确定如何填充这些输入字段。我想应该是类似于这个jQuery自动完成文档的例子。但是,不仅仅需要我选择的内容,还需要与该选择相关联的其他几个列。这是我现在的代码。
<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>
那么,我如何使用自动补全搜索出我需要的记录,然后一旦它被选中,收集所有这些变量值为LName, FName,和eMail当我只拉(FullName)到我的自动补全数组。
我是否需要使用选择来执行db-1的另一个查询,然后将这些返回值添加到文本框中?我可以这样做,如果我有自动完成选项的id但我不知道怎么得到它
如果有一种方法可以在每个进程中提取这些值,那就更好了。
我准备只是复制一些代码,在gridview中返回查询结果,然后我可以使用gridview选择填充文本字段。然而,如果这个自动补全功能可以以某种方式连接起来,它在页面上看起来会更干净。提前感谢你对这个问题的建议。——蒂姆。
当前您的自动完成源是一个名称数组。但是您希望填充所选选项的FirstName、LastName和Email。因此,首先,我们需要将源数据从简单的名称数组更改为对象数组,其中每个对象都将具有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>
}