Question

这是我用来自动完成的代码

在HTML视图中

<script>
    $(function () {
                $("#autoComp").autocomplete({
                    source: '@Url.Action("GetAutoComp")',
                    select: function (e, i) {
                        $("#autoComp").val(i.item.val);
                    },
                    minLength: 1
        });
    });

</script>

In Action GETAUTOCOMP我已经调用了一个web服务

  public JsonResult GetAutoComp(string term)
        {
            ProcorreService.ProcorreWebService service = new ProcorreService.ProcorreWebService();
            string[] rst = service.Autocomplete(term);

           return Json(rst, JsonRequestBehavior.AllowGet);            
        }

在sperate服务器Web服务中，我编写了以下代码来检索数据库中的数据

[WebMethod]
public List<string> Autocomplete(string autoName)
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["TESTDBConnectionString"].ConnectionString;

String query = @"Select CountryName,ID from Country where CountryName LIKE ''+@SearchFname+'%'";
SqlCommand cmd = new SqlCommand(query, con);
cmd.Parameters.AddWithValue("@SearchFname", autoName);

List<string> list = new List<string>();

con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
list.Add(string.Format("{0}-{1}", dr["COYNTRYNAME"], dr["ID"]));
}

return list;
}

此代码工作正常，它将数据检索到HTML视图，但是当选择列表时，它返回国家/地区名称，但我需要获取要返回的国家/地区的ID

所以要获取我尝试过以下方式的国家/地区的ID

我已尝试将自动填充功能转换为Json。

我也尝试使用jquery本身内部的ajax从jquery中检索数据。

$(document).ready(function () {
    $("#<%=txtSearch.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
});

在第二种情况下，它会显示错误，例如 no＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。因此不允许原点访问来解决此错误我试图在服务器中添加以下标题，但它没有解决问题

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <!-- Enable Cross Domain AJAX calls -->
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
        <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
      </customHeaders>
    </httpProtocol>
   </system.webServer>

我试图通过多种方法获取ID，但无法获得任何帮助或链接到如何获取ID可能会有所帮助，提前感谢

Answer 1

在处理从ajax调用返回的数据时用值替换val

return {
   label: item.split('-')[0],
   value: item.split('-')[1]
}

...并修改如下选择

select: function (e, i) {
    $("#<%=hfCustomerId.ClientID %>").val(i.item.value);
}

如何使用文本框自动完成从所选特定字段中获取ID值

1 个答案: