locked
Quick Search - But only display once a search is started RRS feed

  • Question

  • User982203039 posted

    Hopefully I can explain what I am trying to do here.  I want to create a quick search box - but I want to have the initial results to be blank - no records. But when I start typing in the search box it starts to return results - BUT I would like it to only return 3 - 4 records. Does that make sense? My end result is to have on our main intranet page a search box that a employee can quickly start typing in some product information and have a few results returned quickly - without displaying them all initially. Here is a code I have working in another view that I would like to modify:

    Thanks!
    EB

        <div class="form-group">
            <input type="text" class="form-control" id="SearchInput"
                   onkeyup="myFunction()" placeholder="Search for Employee">
        </div>

    <table id="Prods"> <tr> <td> @Html.DisplayFor(modelItem => item.Prod) </td> </tr> </table>
    <script> function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("SearchInput"); filter = input.value.toUpperCase(); table = document.getElementById("Prods"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script>

    Tuesday, August 27, 2019 1:54 PM

Answers

  • User475983607 posted

    Your are looking for autocomplete.  There are many autocomplete JavaScript libraries that a simple Google search will turn up.  Below are two...

    https://www.w3schools.com/howto/howto_js_autocomplete.asp

    https://jqueryui.com/autocomplete/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 27, 2019 2:33 PM
  • User475983607 posted

    OK - So here is where I am at. I am trying to use autocomplete with results from a database. Here is the code from the controller and view - I get no errors on loading of the view but I never get any search results. Can you see anything wrong?

    The Action expects an input parameter, ename, but the parameter is not sent by the AJAX function.  Please use the Visual Studio debugger and developer tools (F12) to find where your code is failing or not working as expected.

    Also, you should follow the remote data source documentation.

    https://jqueryui.com/autocomplete/#remote

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 4:23 PM

All replies

  • User475983607 posted

    Your are looking for autocomplete.  There are many autocomplete JavaScript libraries that a simple Google search will turn up.  Below are two...

    https://www.w3schools.com/howto/howto_js_autocomplete.asp

    https://jqueryui.com/autocomplete/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 27, 2019 2:33 PM
  • User982203039 posted

    Yes - this is exactly what I want - but how do I get the list from a Viewbag? Not static text?

    Tuesday, August 27, 2019 7:18 PM
  • User475983607 posted

    Yes - this is exactly what I want - but how do I get the list from a Viewbag? Not static text?

    I have no idea.  How does your code work and what autocomplete library are you using?  I'm not sure why ViewBag is part of the solution.  ViewBag is passed from an Action to a View.   I assume you would skip the View and return JSON from an Action or Web API.

    Sharing your code will help us to help you.

    Tuesday, August 27, 2019 8:48 PM
  • User982203039 posted

    So I am sure I have some conflicting code somewhere but when I use the following code (found online) it works fine if I remove

    @Scripts.Render("~/bundles/jquery") from the _layout - but then my main page gives me an error: Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4

    Any ideas?

    [HttpPost]

    public JsonResult getemp(string ename)

    {

    var emp = (from x in em.Employees where x.FirstName.StartsWith(ename) select new { label = x.FirstName + " - " + x.LastName + " Ext:" + x.PhoneExt }).ToList();

    return Json(emp);

    }

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <link rel="Stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />

    <script>

    $(function () {

    $("#txtempname").autocomplete({

    source: function (request, response) {

    $.ajax({

    url: "/HelpDesk/getemp/",

    data: "{'ename':'" + request.term + "'}",

    datatype: "json",

    type: "POST",

    contentType: "application/json; charset=utf-8",

    success: function (data) {

    response($.map(data, function (item) {

    return item;

    }))

    },

    });

    },

    minLength: 1

    });

    });

    $.fn.jquery

    </script>

    <input style="width:500px" type="text" id="txtempname" name="ename" />


    Wednesday, August 28, 2019 3:32 PM
  • User475983607 posted

    OK - So here is where I am at. I am trying to use autocomplete with results from a database. Here is the code from the controller and view - I get no errors on loading of the view but I never get any search results. Can you see anything wrong?

    The Action expects an input parameter, ename, but the parameter is not sent by the AJAX function.  Please use the Visual Studio debugger and developer tools (F12) to find where your code is failing or not working as expected.

    Also, you should follow the remote data source documentation.

    https://jqueryui.com/autocomplete/#remote

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 28, 2019 4:23 PM
  • User982203039 posted

    I have a different issue now - reposted a new question. Thanks

    Wednesday, August 28, 2019 7:15 PM