Problem with jQuery live-search (html items doubles up and zoom like 150%)

Question

I have a table with Companys, and having a textbox where i can live-search. But there is a problem that the search result show up in like a more zoomed in table which also includes a one more searchbar... and it looks bad. It's like there is a view on a view..

This is my jQuery, table id = listTable and searchbar id = search.

$(function() {

$("#search").keyup(function(e) {
        var txtenter = $("#search").val();
    $.get("/Storages/Index?search=" + txtenter,function(r){

        $("#listTable").html(r);
        });

});
});

This is my controller

public async Task<IActionResult> Index(string search = null)
    {
        if (!string.IsNullOrEmpty(search))
        {
            var foundItems = SearchItem(search);
            return View(foundItems);
        }

        return View(await _context.Storage.ToListAsync());
    }

    public List<Storage> SearchItem(string search)
    {
        var result = _context.Storage.Where(s => s.Name.Contains(search)).ToList();

        return result;
    }

Is there any change i can do to make the result of the search appear in the first table/ or make the result not like zoomed in and double buttons and searchbars..

score 0 · Answer 1 · answered Nov 16 '19 at 14:50

It is a little bit hard to understand 'show up in like a more zoomed in table which also includes a one more searchbar' statement. But from what i understand you view is not partial so it is rendering entire page with layout. You can refer to this link.

What you need to do is first :

public async Task<IActionResult> Index(string search = null)
    {
        if (!string.IsNullOrEmpty(search))
        {
            var foundItems = SearchItem(search);
            return View(foundItems);
        }

        return PartialView(await _context.Storage.ToListAsync());
    }

and at the top of your view :

@{
    Layout = null;
}

Problem with jQuery live-search (html items doubles up and zoom like 150%)

1 Answers1