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);
}

无法自动填充文本框（搜索）

1 个答案: