Autocomplete from database

Question

Hi people I have the following JavaScript code in my Show All Games View:

<script>
    $('#SearchBox').autocomplete({ source: '/Controller/ShowAllGames' });
</script>

and the following code to function my autocomplete in my ShowAllGames controller:

public ActionResult AutoCompleteGames(string term)
    {
        var db = new gamezoneDBEntities();
        return Json(db.tblGames.Where(games => games.GameName.StartsWith(term)).Select(games => games.GameName), JsonRequestBehavior.AllowGet);

    }

I don't know why my autocomplete is not working as I type my information or words in in my database are not appearing. Also the search box that the script is refering to is the following:

@using (Html.BeginForm())
{
    <div id="SearchBorder">
    <div id="TopSearch">

        @Html.TextBox("DisplaySearchResults", "", new { style = "width:420px;" }) 
        <input id="SearchBox" type="submit" value="Search news archives"/>
        </div>
         </div>
}

I have a serach box and paging enabled all work well just want to know why my auto complete is not working

Thank you

If you require addtional information please ask me i wil provide thanks

EDIT:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;
using GamesTest.Models;


namespace GamesTest.Controllers
{
    public class ShowAllGamesController : Controller
    {
        //
        // GET: /ShowAllGames/

        public ActionResult Index(string Ordering, string WordFilter, string DisplaySearchResults, int? CounterForPage)
        {
            using (var db = new gamezoneDBEntities())
            {

                ViewBag.Message = TempData["message"];
                ViewBag.CurrentSort = Ordering;
                ViewBag.NameSortParm = String.IsNullOrEmpty(Ordering) ? "GameName" : "";
                ViewBag.DateSortParm = Ordering == "ReleaseYearOfGame" ? "DiscriptionOfGame" : "Date";


                {
                    TempData["DisplaySearchResult"] = DisplaySearchResults;

                    {
                        ViewBag.search = DisplaySearchResults;
                    }
                    if (Request.HttpMethod == "GET")
                    {
                        DisplaySearchResults = WordFilter;
                    }
                    else if (DisplaySearchResults == "")
                    {
                        ViewData["MyMessage"] = "Nothing Has Been Entered.";

                    }

                    else
                    {
                        CounterForPage = 1;
                    }

                    ViewBag.CurrentFilter = DisplaySearchResults;

                    var FullDatabaseItem = from b in db.tblGames
                                           select b;
                    if (!String.IsNullOrEmpty(DisplaySearchResults))
                    {
                        FullDatabaseItem = FullDatabaseItem.Where(b => b.GameName.ToUpper().Contains(DisplaySearchResults.ToUpper()));

                    }
                    switch (Ordering)
                    {
                        case "HeadlineName":
                            FullDatabaseItem = FullDatabaseItem.OrderBy(b => b.GameName);
                            break;
                        case "DatePosted":
                            FullDatabaseItem = FullDatabaseItem.OrderBy(b => b.ReleaseYear);
                            break;
                        case "DiscriptionDate":
                            FullDatabaseItem = FullDatabaseItem.OrderBy(b => b.ReleaseYear);
                            break;
                        default:
                            FullDatabaseItem = FullDatabaseItem.OrderByDescending(b => b.ReleaseYear);
                            break;
                    }

                    int pageSize = 3;
                    int pageNumber = (CounterForPage ?? 1);
                    var PageNumberResults = FullDatabaseItem.ToPagedList(pageNumber, pageSize);
                    ViewBag.PageNumberResults = FullDatabaseItem.Count();
                    if (PageNumberResults.Any())
                    {

                        return View(PageNumberResults);
                    }

                    return View("ErrorView");
                }
            }
        }


        public ActionResult AutoCompleteGames()
        {
            var db = new gamezoneDBEntities();
            string term = this.Request.Params["term"].ToString();
            return Json(db.tblGames.Where(games => games.GameName.StartsWith(term)).Select(games => games.GameName), JsonRequestBehavior.AllowGet);

        } 

        //
        // GET: /ShowAllGames/Details/5


        public ViewResult Details(int id)
        {
            using (var db = new gamezoneDBEntities())
            {
                tblGame tblgame = db.tblGames.Find(id);
                return View(tblgame);
            }
        }

        //
        // GET: /ShowAllGames/Create

        public ActionResult Create()
        {
            return View();
        } 

        //
        // POST: /ShowAllGames/Create

        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /ShowAllGames/Edit/5

        public ActionResult Edit(int id)
        {
            return View();
        }

        //
        // POST: /ShowAllGames/Edit/5

        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add update logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        //
        // GET: /ShowAllGames/Delete/5

        public ActionResult Delete(int id)
        {
            return View();
        }

        //
        // POST: /ShowAllGames/Delete/5

        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }
    }
}

My View:

@model PagedList.IPagedList<GamesTest.tblGame>

@{
    ViewBag.Title = "Index";
}

@*<h2>Index</h2>*@

@using (Html.BeginForm())
{
    <div id="SearchBorder">
    <div id="TopSearch">

        @Html.TextBox("DisplaySearchResults", "", new { style = "width:420px;" }) 
        <input id="SearchBox" type="submit" value="Search news archives"/>
        </div>
         </div>
}


<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.position.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>

<p>
@*    @Html.ActionLink("Create New", "Create")*@
</p>
<table id = "OverAll">
@*    <tr>
        <th>
            GameID
        </th>
        <th>
            GameName
        </th>
        <th>
            ReleaseYear
        </th>
        <th>
            Cost
        </th>
        <th>
            Description
        </th>
        <th>
            Downloads
        </th>
        <th>
            Image
        </th>
        <th>
            Console
        </th>
        <th>
            UserName
        </th>
        <th></th>
    </tr>*@

@foreach (var item in Model) {
    <tr>
     @*   <td>
            @Html.HiddenFor(modelItem => item.GameID)
        </td>*@

        <td id = "TableLayout1">
            <img width="100" height="100"alt="ImageFromDatabase" src='@item.Image' />
        </td>
        <td id = "TableLayout2">
            @*@Html.DisplayFor(modelItem => item.GameName)*@
             @Html.ActionLink(item.GameName, "Details", new { id = item.GameID })
        </td>

         <td id = "TableLayout3">
            @Html.DisplayFor(modelItem => item.ReleaseYear)
        </td>
        <td id = "TableLayout4">
          @Html.Raw(item.Description.Substring(0, item.Description.IndexOf(".") + 1))
           @* @Html.DisplayFor(modelItem => item.Description)*@
        </td>
        <td id = "TableLayout5">
            @Html.DisplayFor(modelItem => item.Cost)
        </td>

        <td id = "TableLayout6">
            @Html.DisplayFor(modelItem => item.Downloads) @*want this as a link so I can then click on it and show the game downloads*@

        </td>

        <td id = "TableLayout7">
            @Html.DisplayFor(modelItem => item.ConsoleNameIDFK)
        </td>
        @*<td>
            @Html.HiddenFor(modelItem => item.UserName)
        </td>*@
     @*   <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>*@
    </tr>
}

</table>
@*Below is coding for the page count and the number of results found with the serach result displayed*@

 <div class="PageCounter">
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
    of @Model.PageCount
    &nbsp;
    @if (Model.HasPreviousPage)
    {

        @Html.ActionLink("<<", "Index", new { CounterForPage = 1, Ordering = ViewBag.CurrentSort, WordFilter = ViewBag.WordFilter })
        @Html.Raw("&nbsp;");
        @Html.ActionLink("< Previous Page", "Index", new { CounterForPage = Model.PageNumber - 1, Ordering = ViewBag.CurrentSort, WordFilter = ViewBag.WordFilter })
    }
    else
    {
        @:<<
        @Html.Raw("&nbsp;");
        @:< Prev
    }
    &nbsp;
    @if (Model.HasNextPage)
    {
        @Html.ActionLink("Next Page >", "Index", new { CounterForPage = Model.PageNumber + 1, Ordering = ViewBag.CurrentSort, WordFilter = ViewBag.CurrentFilter })
        @Html.Raw("&nbsp;");
        @Html.ActionLink(">>", "Index", new { CounterForPage = Model.PageCount, Ordering = ViewBag.CurrentSort, WordFilter = ViewBag.CurrentFilter })
    }
    else
    {
        @:Next>
        @Html.Raw("&nbsp;")
        @:>>
    }

    @String.Format("Total of {0} results", ViewBag.PageNumberResults)
    (For @ViewBag.Search)


@*    @if(ViewBag.Message != null)
{
   <p>@ViewBag.Message</p>
}
*@


</div>


<script type="text/javascript">
    var uvOptions = {};
    (function () {
        var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
        uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/ZRhsC1RL1m4gK5megTxxlw.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
    })();
</script>


<script type="text/javascript">
    $('#DisplaySearchResults').autocomplete({ source: '/Controller/ShowAllGames' });
</script>

Do you see any javascript or network errors in Firebug/Chrome Developer Network tab? — jrummell, Apr 09 '12 at 16:56

score 3 · Answer 1 · answered Apr 09 '12 at 16:57

3

One issue is that you are making your button autocomplete instead of your textbox. Change your autocomplete initialization to the following:

$('#DisplaySearchResults').autocomplete({ source: '/Controller/ShowAllGames' });

answered Apr 09 '12 at 16:57

jrummell

42,637
17
112
171

it does nothing when i type tekken, which is stored in my database the auto compleate does not show it – user1137472 Apr 09 '12 at 17:02
Do you see that an ajax request was made? Does it fail? – jrummell Apr 09 '12 at 17:03
The [autocomplete](http://jqueryui.com/demos/autocomplete/#remote) plugin uses ajax to communicate with your controller. – jrummell Apr 09 '12 at 17:09

Steve Mallory · Accepted Answer · 2012-04-09T17:51:06.473

1

Besides the issue jrummell pointed out, your source argument doesn't match the name of your action.

<script>
    $('#SearchBox').autocomplete({ source: '/ShowAllGames/AutoCompleteGames' });
</script>

I suspect you are getting 404 errors as you type in the search box.

EDIT

Well it doesn't make sense to me that you are not getting 404's, but try this; remove the parameter string term from your action and use

string term = this.Request.Params["term"].ToString();

within your function. If I remember correctly, the model binder will not set that parameter as expected.

edited Apr 09 '12 at 17:51

answered Apr 09 '12 at 17:26

Steve Mallory

4,245
1
28
31

I Will try this am not getting any errors infact when i type a word that exsits in the database noting appears will try this an inform you of the outcome thanks – user1137472 Apr 09 '12 at 17:32
I have now tried your code and i cant get auto compleate to show me any values that exsit, i type in tek as the game stored within the database is tekken, the auto compleate shows nothing – user1137472 Apr 09 '12 at 17:37
The name that you have added AutoCompleaseGames is not a controller it is code within the ShowAllGames controller – user1137472 Apr 09 '12 at 17:38
@user1137472 well, autocomplete needs both the controller name and the action name to submit the text to. If you don't specify an action, the routing engine will default to the `Index` action of the controller. – Steve Mallory Apr 09 '12 at 17:42
I have added the public action result AutoCompleteGames(string term) within my showgames controller hence jrummells answer which logically seems correct but is not working – user1137472 Apr 09 '12 at 17:44
I dont know where your code that you just added is ment to go as i cant put it in context with rest as it seems out of place from the rest of the code – user1137472 Apr 09 '12 at 18:03
@user1137472 in the AutoCompleteGames function, before the return line. And remove the term parameter from that function – Steve Mallory Apr 09 '12 at 18:04
I have applied it now will try an see what happens will inform you of outcome – user1137472 Apr 09 '12 at 18:04
No error nothing, do you want to see my controller? may be you can see what is actually happning? – user1137472 Apr 09 '12 at 18:06
I have added my controller and view for you to see if you require more information please ask – user1137472 Apr 09 '12 at 18:12
@user1137472 besides the changes in the ActionResult, you need to make the change to the .autocomplete call. With MVC, you do not include the word 'Controller' in your url's, and the url should be in the form /controller_name/action_name, where controller_name drops the 'Controller' part. So, for your code, you need '/ShowAllGames/AutoCompleteGames' for the autocomplete source parameter. – Steve Mallory Apr 09 '12 at 18:20
Will try this i am really greatful for the help you are providing am just hoping this work so i can mark an answer correctly an get you guys points for ur kind efforts – user1137472 Apr 09 '12 at 18:22
Thank you so MUCH :) IT WORKS steave mallory can you update ur answer so i can mark it correct :) thank you – user1137472 Apr 09 '12 at 18:25

Autocomplete from database

2 Answers2