Autocomplete not working in jQuery - asp.net-mvc-4

Question

I am trying to get all usernames in jQuery autocomplete but it doesn't seem to work at all.
controller-
public ActionResult Allusers(string Email) {
if (ModelState.IsValid) {
var allUser = (from us in db.SystemUsers
select new UserModel
{
Email=us.Email,
UserId=us.UserId
}).Distinct().ToArray();
// ViewBag.Team = allUser.OrderBy(x => x.Text);
return Json(allUser,JsonRequestBehavior.AllowGet);
}
return View();
}
Script-
<script type="text/javascript">
$(function () {
$("input #autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
url: '/AllUsers/AllUsers/',
type: "POST",
dataType: "json"
});
}
});
});
</script>
Following scripts I am using for it-
<script src="../../Scripts/jquery.unobtrusive-ajax.min.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>
But no luck.

Answer 1

Try as follows
<script type="text/javascript">
$(function () {
var itemList = [];
$("input #autocomplete").autocomplete({
source: function (request, response) {
$.ajax({
url: '/AllUsers/AllUsers/',
type: "POST",
dataType: "json",
Sucess: function(result) {
$.each(result, function (index, item) {
itemList.push({ label: item.Email, value: item.UserId});
});
}
});
response(itemList);
}
});
});

Answer 2

You need to define success function and fill the response parameter
Refer to the JQuery autocomplete remote json

Answer 3

I was also stucked in this however below worked for me.
In my case my json result was array of string, so there was no column for the returned data.
If you are using .cshtml instead of html then you must have to add/register javascript and css files in bundle config
Render required files in your shared or respective cshtml file.
After that in your cshtml file add below line:
<input type='text' id='stockName'/>
Below part is very tricky and important:
$(function () {
$('#stockName').autocomplete({
source: function (request, response) {
$.getJSON("/EquityList/GetStockNames?term=" + request.term, function (data) {
var realArray = $.makeArray(data)
response($.map(realArray, function (item) {
return {
value: item,
id: item
}
}))
});
},
minLength: 3,
delay: 0
});
});
Important Note:
1) we need to format json data into array first
2) then we need to use map function, this well format the data in to the required format for autocomplete. Until and unless this data formatting is not done, suggestion dialog box UI will not be displayed.
Hope this one helps other developers.