ASP.NET MVC 5 – jQuery Auto Suggest ( Like Google Search Engine )

ASP.NET MVC 5 – jQuery Auto Suggest ( Like Google Search Engine )

   View
 
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td>@Html.TextBox("search", "", "")</td>
    </tr>
    <tr>
      <td><div id="panel"></div></td>
    </tr>
  </table>
 
  <style>
 
    #search {
      width: 300px !IMPORTANT;
      padding: 5px 5px 5px 5px;
      margin: 0px 0px 0px 0px;
    }
 
    #panel {
      display: none;
      position: relative;
      top: 0px;
      left: 0px;
      width: 500px !IMPORTANT;
      height: 0px;
      padding: 0px 0px 0px 0px;
      margin: 0px 0px 0px 0px;
      background-color: #FFFFFA;
    }
 
  </style>
 
  <script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
  <script type="text/javascript">
 
    $(document).ready(function () {
      $("#search").keyup(function () {
        if ($("#search").val().length > 1) {
 
          name = $("#search").val();
 
          for(i=0;i<5;i++){
            name = name.replace(" ", "_");
          }
 
          $("#panel").load("/Home/Like/" + name, function () {
            if ($("#panel #searchpanel").length > 0) {
              if ($("#panel #searchpanel").html().trim().length > 0) {
                $("#panel").show();
              }
            } else {
              $("#panel").hide();
            }
          });
        } else {
          $("#panel").html("");
          $("#panel").hide();
        }
      });
    });
 
  </script>
 
   Ajax View
 
  @model List<DAO.PLAYER_VIEW>
  @{
 
    Layout = String.Empty;
 
    <div id="searchpanel">
      @foreach (DAO.PLAYER_VIEW p in Model)
      {
        <div class="searchitem">
          <span class="pname">@(p.PLAYER_NAME)</span>
          <span class="pnation"> ( @(p.NATION) / @(p.TEAM) / @(p.POSITION) / @(p.AGE) )</span>
        </div>
      }
    </div>
 
  }
 
  <style>
 
    .searchitem name, .searchitem pnation {
      line-height:18px;
      font-weight:bold;
    }
 
    .searchitem .pnation {
      font-weight: normal;
      font-size: 4px;
      color: #333333;
    }
 
    #searchpanel {
      border: 1px solid #DDDDDD;
      background-color: #FFFFFF;
    }
 
    .searchitem {
      cursor: pointer;
      background-color: #F3F3F3;
      color: #000000;
      padding: 2px 10px 2px 10px;
      margin:3px 0px 3px 0px;
    }
 
  </style>
 
  <script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
  <script type="text/javascript">
 
    $(document).ready(function () {
      $(".searchitem").click(function () {
        $("#search").val($(this).children(".pname").html());
        $("#panel").hide();
      });
    });
 
  </script>
 
   Controllers
 
  public ActionResult Like(string id)
  {
    SoccerEntities entity = new SoccerEntities();
 
    List<PLAYER_VIEW> list;
 
    if (Request.IsAjaxRequest() && id != null)
    {
      id = id.Replace("_", " ");
      list = (from p in entity.PLAYER_VIEW where (p.PLAYER_NAME.Contains(id)) select p).ToList();
    }
    else
    {
      list = new List<PLAYER_VIEW>();
    }
 
    return View(list);
  }