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

Posted 2023-04-13

【中文标题】jQuery ui 自动完成在 MVC c# 中不显示任何内容

【英文标题】：jQueryu ui autocomplete doesn´t show anything in MVC c#

【发布时间】：2017-10-18 19:49:34

【问题描述】：

我想使用 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;

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

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

【问题讨论】：

为什么将minLength 设置为1？那会返回多少个项目？ SQL 查询是什么样的？

调试代码，控制器结果正确？

@Aline 是的，它返回到期记录但 tetxbox 不显示它们

你的源属性是路由？例如，您的源应该是一个对象数组。您正在搜索的内容.. 尝试搜索：“/”

您永远不会将prefix 的值传递给控制器​​（默认为term）

【参考方案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/