jquery - 自动完成未正常运行，结果未与“li”标签绑定
问题描述
我想在 mvc 中使用 Autocomplete，我在 Visual Studio 中编写了代码并将其与控制器方法绑定，一切正常我从控制器获得了结果，但我的结果未显示在文本框列表中，
我尝试了很多事情，例如更改 jquery 的顺序以及 css 的更改或用新版本更改但无法对其进行排序。请建议我能做些什么来解决这个问题
$("#EstimationNo").autocomplete({
source: function(request, response) {
$.ajax({
url: "/Service/GetEstName",
type: "POST",
dataType: "json",
data: "{ 'prefix': '" + request.term + "'}",
//data: { Prefix: request.term },
contentType: "application/json; charset=utf-8",
success: function(data) {
debugger;
response($.map(data, function(item) {
return {
label: item.EstimationNo,
value: item.EstimationNo
};
}))
},
error: function(err) {
alert(err.statusText);
},
failure: function(response) {
alert(response.responseText);
}
})
},
messages: {
noResults: 'No results found.',
results: function(count) {
return count + (count > 1 ? ' results' : ' result ') + ' found';
}
},
});in below image you find autocomplete result
[Img1][1]
result after autocomplete done is in below image
[Second image of result][2]
[1]: https://i.stack.imgur.com/eMr3i.png
[2]: https://i.stack.imgur.com/peqH4.png
HTML Page :
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
@using (Html.BeginForm("AddService", "Service", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal sparkline12-list">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.HiddenFor(model => model.ServiceId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.HiddenFor(model => model.ServiceId, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
@Html.HiddenFor(model => model.CreatedByBD, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.HiddenFor(model => model.CreatedByBD, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ServiceName, "Service Name", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ServiceName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ServiceName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ClientName, "Client Name", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ClientName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ClientName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ServiceDetail, "Service Detail", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ServiceDetail, new { htmlAttributes = new { @class = "form-control ht" } })
@Html.ValidationMessageFor(model => model.ServiceDetail, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EstimationNo, "Estimation No.", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.EstimationNo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.EstimationNo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.StartDate, "Start Date", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="input-group date col-md-4" style="padding-left: 15px;">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
@if (ViewBag.Message == "Add Services")
{
@Html.TextBoxFor(model => model.StartDate, "{0:MM/dd/yyyy}", new { @class = "form-control date-picker" })
}
else
{
@Html.TextBoxFor(model => model.StartDate, "{0:MM/dd/yyyy}", new { @class = "form-control", @readonly = "readonly" })
}
@Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.EndDate, "End Date", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="input-group date col-md-4" style="padding-left: 15px;">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
@Html.TextBoxFor(model => model.EndDate, "{0:MM/dd/yyyy}", new { @class = "form-control date-picker" })
@Html.ValidationMessageFor(model => model.EndDate, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.TotalHrs, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TotalHrs, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.TotalHrs, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Remark, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Remark, new { htmlAttributes = new { @class = "form-control ht" } })
@Html.ValidationMessageFor(model => model.Remark, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Status, "Status", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Status, new List<SelectListItem>
{
new SelectListItem{ Text="New", Value = "New" },
new SelectListItem{ Text="InProcess", Value = "InProcess" },
new SelectListItem{ Text="Completed", Value = "Completed" },
new SelectListItem{ Text="Rejected",Value="Rejected"},
}, "Select Status", new { @class = "form-control select2_demo_4" })
@Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
</div>
<input type="hidden" id="hdnDdStatus" name="hdnDdStatus" value="" />
</div>
<div class="form-group-inner">
<div class="login-btn-inner">
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-9">
<div class="login-horizental cancel-wp pull-left">
<button class="btn btn-sm btn-primary login-submit-cs" type="submit" onclick="if (!validate()) {return false;}">@ViewBag.Message</button>
</div>
</div>
<div>
@Html.ActionLink("Back to List", "ServiceList")
</div>
</div>
</div>
</div>
</div>
}
</div>
解决方案
推荐阅读
- javascript - 将相同的事件处理程序添加到多个元素，仅适用于一个
- javascript - 如何使 iframe 在重新加载时自动滚动到底部？
- wdio-v5 - 我必须使用 wdio javascript 从网页获取文本并验证表值。如何使用哈希映射来做到这一点？
- windows-10 - 如何取消选中 Windows 10 pc 中的“测试版：使用 Unicode UTF-8 支持全球语言”框？
- python - 如何在嵌套列表中找到最后一次出现的项目？
- c - 将nasm代码组合到c中时出现段错误（核心渲染）
- python - JSON 字段是包含 JSON 的字符串；如何将其转换为正确的 JSON？
- node.js - 从邮递员将 csv 文件读入节点 js 控制器端点
- owasp - OWASP zap-api-scan.py url 排除
- php - GuzzleHttp\Exception\ClientException：客户端错误：`POST https://mms.shaparak.ir/merchant/webService/writeExternalRequest`400 错误请求