jQuery ui 自动完成在 MVC c# 中不显示任何内容

Question

我想使用 jQuery-ui 自动完成在 MVC C# 视图中显示一个自动完成文本框，这是我的视图代码

@{
    ViewBag.Title = "Index";
}
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">
        $(function () {
            $("#SearchString").autocomplete({
                source: "/Borrar/autocompletar",
                minLength: 1,
                select: function (event, ui) {
                    if (ui.item) {
                        $("#SearchString").val(ui.item.value);
                    }
                }
            });
        });
    </script>
    <div class="container col-md-10 col-md-offset-3">
        <h2>Autocompletar</h2>
        @using (Html.BeginForm())
        {
            <p>
                Empresa: @Html.TextBox("SearchString")
                <input type="submit" value="Search" />
            </p>
        }
    </div>

这是应该填充文本框的控制器代码

 public JsonResult autocompletar(string prefix)
        {
            List<GFC_Site.ViewModels.EmpresaAutocomplete> listado = new List<GFC_Site.ViewModels.EmpresaAutocomplete>();
            ProxyGFC.ServiceGFCClient cliente = new ProxyGFC.ServiceGFCClient();
            List<WcfService.Entidades.EmpresaAutocomplete> listadoBase = new List<WcfService.Entidades.EmpresaAutocomplete>();
            listadoBase = cliente.Autocompletar(prefix);
            foreach (var item in listadoBase)
            {
                GFC_Site.ViewModels.EmpresaAutocomplete dato = new ViewModels.EmpresaAutocomplete();
                dato.empresa = item.empresa;
                //dato.np = item.np;
                listado.Add(dato);
            }
            return Json(listado, JsonRequestBehavior.AllowGet);

        }

其中 (GFC_Site.ViewModels.EmpresaAutocomplete) 是一个只有一个字符串属性 (empresa) 的类，而 (ProxyGFC.ServiceGFCClient cliente) 是到 WCF 服务器的连接，WCF 是连接应用程序和数据库的连接(List listadoBase) 是 WCF 中的一个类，具有两个属性（empresa 和 np）。

这是 WCF 中检索我想在文本框中显示的信息的方法

public List<EmpresaAutocomplete> Autocompletar(string prefix)
{
    OdbcCommand cmd = Helper.Commandos.CrearComando();
    cmd.CommandText = "select numero_patronal, nombre_empresa from empresas where estado= ? and nombre_empresa like ?";
    cmd.Parameters.Add("@estado", OdbcType.VarChar).Value = "1";
    cmd.Parameters.AddWithValue("@empresa", prefix + "%");
    List<EmpresaAutocomplete> data = new List<EmpresaAutocomplete>();
    try
    {
        cmd.Connection.Open();
        var reader = cmd.ExecuteReader();
        while (reader.Read())
        {
            EmpresaAutocomplete datos = new EmpresaAutocomplete();
            datos.np = reader["numero_patronal"].ToString();
            datos.empresa = reader["nombre_empresa"].ToString();
            data.Add(datos);
        }

    }
    catch (Exception ex)
    {

        throw new ApplicationException("Excepcion :", ex);
    }
    return data;

}

好吧，我的问题是文本框没有显示任何内容，实际上它被冻结了

您能告诉我您认为是什么问题吗？

Answer 1

首先，让我们看看自动完成功能的实际应用，从文本输入开始：

<label for=”somevalue”>Some value:</label><input type=”text” id=”somevalue” name=”somevalue”/>

如果我们添加对 jQuery UI 脚本文件和 css 文件的引用，我们可以在我们的视图中添加一个脚本块：

<script type=”text/javascript” language=”javascript”> 
$(document).ready(function () { 
    $(‘#somevalue’).autocomplete({ 
        source: ‘@Url.Action(“Autocomplete”)’ 
    }); 
}) </script>

此脚本块通过 id 识别文本输入，然后调用自动完成功能来连接此 DOM 元素的自动完成行为。我们传递一个 URL 来识别数据的来源。对于这篇文章，我只是创建了一个返回 JSON 数据的 ASP.NET MVC 操作（如下所示）。请注意，在视图中，我使用 Url.Action 在路由表中查找此操作的 URL - 避免对 URL 进行硬编码的诱惑，因为这会复制路由表，并且以后很难更改路由。

public ActionResult Autocomplete(string term) 
{ 
var items = new[] {“Apple”, “Pear”, “Banana”, “Pineapple”, “Peach”};

var filteredItems = items.Where( 
    item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0 
    ); 
return Json(filteredItems, JsonRequestBehavior.AllowGet); 
}

https://blogs.msdn.microsoft.com/stuartleeks/2012/04/23/asp-net-mvc-jquery-ui-autocomplete/