Yagnesh Cangi Yagnesh Cangi - 6 months ago 11
jQuery Question

Jquery auto complete not displaying the list

$("#txtSearch").autocomplete({
source: '@Url.Action("GetReports")'
});


This is what I have in my JQuery which calls the method
GetReports
. The method in the controller is returning the correct data and I'm only return first
return Json(filteredReports.Take(2), JsonRequestBehavior.AllowGet);


When I type something in the text box, the list doesn't appear however, when I press up and down arrow, I can see the text is appearing in box correctly.

I have tried putting

.ui-autocomplete {
z-index: 2;
}


in my CSS file but no luck. I'm not sure what I am doing wrong.

Answer

Maybe a CSS issue. I have this:

.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
color: #555;
font-size: 14px;
}

.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;

}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
margin: -1px;
}


.ui-menu .ui-menu-item {
padding: 3px 1em 3px .4em;
cursor: pointer;
 }