Autocomplete feature not working. MVC3 Please Help.. [Resolved]

Posted by Anonymus under jQuery on 7/26/2012 | Points: 10 | Views : 1634 | Status : [Member] | Replies : 1
Hi,

1. I am applying autocomplete feature by referring one of the url on net to a text box in one of my chtml page:
 <div>
@Html.TextBox("postTags")
</div>


2. In the controller I have a method as below :

public ActionResult LookupTags(string q, int limit)
{
// We can get a list of tags from the database, but
// for this example, I will populate a list with values.
List<string> tags = new List<string>();
tags.Add("asp");
tags.Add("mvc");
tags.Add("microsoft");
tags.Add("sql server");
tags.Add("jQuery");
tags.Add("ajax");
// Select the tags that match the query, and get the
// number or tags specified by the limit.
var retValue = tags
.Where(x => x.StartsWith(q))
.OrderBy(x => x)
.Take(limit)
.Select(r => new { Tag = r });
// Return the result set as JSON
return Json(retValue);
}


3. I have written JS code as below in the my chtml file as below inside the Script tag:
$(document).ready(function () {
$("#postTags").autocomplete('@Url.Action("LookupTags", "MyController")',

{
dataType: 'json',
parse: function (data) {
debugger;
var rows = new Array();
for (var i = 0; i < data.length; i++) {

rows[i] = { data: data[i], value: data[i].Tag, result: data[i].Tag };
}
return rows;
},
formatItem: function (row, i, max) {
return row.Tag;
},
width: 300,
highlight: false,
multiple: true,
multipleSeparator: ","
});


4. Reference files that I have included as below on my chtml page( I am confused here):

<script src="../../../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery.autocomplete.pack.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="../../../../Content/themes/eonestyle/jquery.ui.autocomplete.css" rel="stylesheet"
type="text/css" />
<link href="../../../../Content/themes/eonestyle/jquery.ui.base.css" rel="stylesheet"
type="text/css" />


5. My controller's action is getting called.

The Problem
1. When I type in the textbox no dropdown is seen as we see in autocomplete..

Am I missing out on something? Please help me out..its urgent.

Please Help...

Regards,
Anonymus



Responses

Posted by: Anonymus on: 7/26/2012 [Member] Starter | Points: 25

Up
0
Down

Resolved
Finally, its working..... :)

I managed to solve it by modifying the the action method as below :

public JsonResult LookupTags(string q, int limit)  

{
// We can get a list of tags from the database, but
// for this example, I will populate a list with values.
List<string> tags = new List<string>();
tags.Add("asp");
tags.Add("mvc");
tags.Add("microsoft");
tags.Add("sql server");
tags.Add("jQuery");
tags.Add("ajax");
// Select the tags that match the query, and get the
// number or tags specified by the limit.
var retValue = tags
.Where(x => x.StartsWith(q))
.OrderBy(x => x)
.Take(limit)
.Select(r => new { Tag = r });
// Return the result set as JSON
return Json(retValue, JsonRequestBehavior.AllowGet);
}


Thanks!!

Regards,
Anonymus

Anonymus, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response