自动完成功能无法正常运行,结果未与“ li”标记绑定

时间:2019-07-17 11:10:20

标签: jquery asp.net-mvc jquery-ui-autocomplete

我想在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>

0 个答案:

没有答案