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

Question

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

@{
    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) 是一个 class 只有一个字符串属性 (empresa) 和 (ProxyGFC.ServiceGFCClient cliente) 是到 WCF 服务器的连接， WCF 是将应用程序与数据库连接起来的那个，(List listadoBase) 是 WCF 中的一个 class，具有两个属性（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 来标识数据的来源。为此 post 我只是创建了一个 ASP.NET MVC 操作，其中包含 returns JSON 数据（如下所示）。请注意，在视图中，我使用 Url.Action 在路由 table 中查找此操作的 URL – 避免硬编码 URL 的诱惑，因为这会重复路由 table 并且以后很难更改路由。

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/

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

jQueryu ui autocomplete doesn´t show anything in MVC c#

c#

asp.net-mvc

wcf

jquery

jquery-ui-autocomplete