我想在mvc中使用自动完成功能,我在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>