Hi I just made an ASP.NET MVC4 Intranet Web Application. I haven't changed the code much from what the default was. But the autocomplete function does not work for me. When I mean it doesn't work for me, meaning that it shows the fields and the css looking stuff. But the functionality like moving does not work. Here is my code:
_Layout.cshtml
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - FMCS Historical Data</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="../../Content/themes/cupertino/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
Index.cshtml
<pre lang="HTML">
<script type="text/javascript">
$(document).ready(function () {
$("#TagInfo").autocomplete('@Url.Action("TagInfo","TagAutoComplete")', {
minChars: 3
});
});
</script>
<ol class="round">
<li class="one">
<h5>class one header</h5>
class one text
<label for="TagInfo">
Tag:</label>
<input id="TagInfo" />
</li>
<li class="two">
<h5>
class two header</h5>
class two text </li>
<li class="three">
<h5>
class three header</h5>
class three text </li>
</ol>
TagAutoCompleteController
public class TagAutoCompleteController : Controller
{
public ActionResult TagInfo(string searchstring)
{
TagDataDataContext dataContext = new TagDataDataContext();
var tagdata = (from t in dataContext.TagDatas
where t.TAG_NAME.Contains(searchstring)
select t.TAG_NAME).Distinct().Take(10);
string content = string.Join<string>("\n",tagdata);
return Content(content);
}
}
Please help me?
Edit:
I just added sortable and it is not moveable. What is wrong?
<ul id="sortable">
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<div>1</div>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<div>2</div>
</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<div>3</div>
</li>
</ul>