Cannot autocomplete textbox (search)

Question

I want to implement an autocomplete textbox, like the one in this tutorial: Implement autocomplete textbox functionally, but I can't make it work.

Controllers:

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

View:

 <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>

    }

My code doesn't have any trouble executing, but it doesn't work.

Answer 1

Your jquery selector is missing the hash character - it should be $("#search").autocomplete({... (like in Snehal's example).

Just as a side note you've got two references to jquery UI javascript - one minified and one not.

Hope this helps.

Answer 2

Try this its working for me

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

And In controller

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