無法自動完成文本框（搜索）

Question

我想實現自動完成文本框，就像本教程中的文本框：Implement autocomplete textbox functionally，但我無法使其工作。

控制器：

public ActionResult Productos(string searchString, string currentFilter, int? page) 
{ 
    int pageSize = 8; 
    int pageNumber = (page ?? 1); 

    ViewBag.CurrentFilter = searchString; 

    if (!String.IsNullOrEmpty(searchString)) 
    { 
     var producto = db.ProductosList 
      .Where(m => m.Nombre.StartsWith(searchString)) 
      .Include(x => x.Subcategoria) 
     .Include(x => x.Subcategoria.Categorias) 
     .Include(x => x.Subcategoria.Categorias.Marcas) 
     .OrderBy(x => x.Subcategoria.Nombre).ToPagedList(pageNumber, pageSize); 

     var subcategorias = db.SubcategoriasList 
    .Include(x => x.Categorias) 
       .OrderBy(x => x.Categorias.Nombre).ToPagedList(pageNumber, pageSize); 

     var categorias = db.CategoriasList 
      .Include(x => x.Subcategoriases) 
      .OrderBy(x => x.Subcategoriases.Count).ToPagedList(pageNumber, pageSize); 

     var model = new PagedListViewModel 
     { 
      SubcategoriasListes = subcategorias, 
      CategoriasListes = categorias, 
      ProductosListes = producto 
     }; 

     ViewBag.Count = db.ProductosList.Count(); 
     return View(model); 
    } 
    else 
    { 
     var producto = db.ProductosList 
      .Include(i => i.FilePaths) 
       .Include(x => x.Subcategoria) 
     .Include(x => x.Subcategoria.Categorias) 
     .Include(x => x.Subcategoria.Categorias.Marcas) 
     .OrderBy(x => x.Subcategoria.Nombre).ToPagedList(pageNumber, pageSize); 

     var subcategorias = db.SubcategoriasList 
       .Include(x => x.Categorias) 
       .OrderBy(x => x.Categorias.Nombre).ToPagedList(pageNumber, pageSize); 

     var categorias = db.CategoriasList 
      .Include(x => x.Subcategoriases) 
      .OrderBy(x => x.Subcategoriases.Count).ToPagedList(pageNumber, pageSize); 

     var model = new PagedListViewModel 
     { 
      SubcategoriasListes = subcategorias, 
      CategoriasListes = categorias, 
      ProductosListes = producto 
     }; 
     ViewBag.Count = db.ProductosList.Count(); 
     return View(model); 
    } 
} 

public JsonResult GetProductos(string search, int? page) 
{ 
    int pageSize = 8; 
    int pageNumber = (page ?? 1); 

    var producto = db.ProductosList 
     .Where(m => m.Nombre.StartsWith(search)) 
     .Select(m => m.Nombre).ToList(); 
    return Json(producto, JsonRequestBehavior.AllowGet); 
} 

查看：

<link href="~/Content/Main/dis/dis/css/jquery-ui.css" rel="stylesheet" /> 
<script src="~/Content/Main/dis/dis/js/jquery-ui.js"></script> 
<script src="~/Content/Main/dis/dis/js/jquery-ui.min.js"></script> 
<script src="~/Content/Main/dis/dis/js/jquery.js"></script> 

    <script type="text/javascript"> 
    $(function() { 
     $("search").autocomplete({ 
      source: '@Url.Action("GetProductos")' 
     }); 

    }); 
</script> 
<section class="page-title"> 
    <div class="alert-style"> 
     @{ Html.RenderPartial("_Alerts"); } 
     </div> 
    <div class="grid-row clearfix"> 
     <h1>Productos</h1> 
     <br /> 
     @using (Html.BeginForm("Productos", "Productos", FormMethod.Get)) 
     { 

       <div class="input-group pull-right"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <p class="s"> @Html.TextBox("searchString", ViewBag.CurrentFilter as string, new { @id = "search", @placeholder = "¿Qué producto buscas?", autofocus = "autofocus" })</p> 
       </div> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       <input type="submit" value="Buscar por producto" class="btn pull-left" id="busqueda" autofocus /> 
      </div> 
     </div> 

    } 

我的代碼不能執行任何麻煩，但它不工作。

Answer 1

試試這個它的工作對我來說

$("#search").autocomplete({ 
      minLength: 3, 
      source: '@Url.Action("GetProductos")', 
      select: function (event, ui) { 
       $('#search').val(ui.item.value); 
      }, 
      change: function (event, ui) { 
      } 
     }); 

並在控制器

public JsonResult GetProductos(string term) 
{ 
    var producto = db.ProductosList 
     .Where(m => m.Nombre.StartsWith(search)) 
     .Select(m => m.Nombre).ToList(); 
    return Json(producto, JsonRequestBehavior.AllowGet); 
} 

Answer 2

你的jQuery選擇缺少哈希角色 - 它應該是$("#search").autocomplete({...（如在Sne​​hal的例子）。

就像一個側面說明你有兩個引用jQuery UI的JavaScript - 一個縮小，一個不是。

希望這會有所幫助。