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