Внутри диалогового окна jquery я хотел бы использовать функцию jquery autocomplete для jqueryUI.
Затем я подготовил действие в моем контроллере (я использую ASP.NET MVC2), который следующим образом
public ActionResult GetForos(string startsWith, int pageSize)
{
// get records from underlying store
int totalCount = 0;
string whereClause = "Foro Like '" + startsWith + "%'";
List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);
//transform records in form of Json data
List<ForoModelWS> foros = new List<ForoModelWS>();
foreach ( Foro f in allForos)
foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId),
text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });
return Json(foros);
}
Класс ForoModelWS - это простой класс, используемый только для хранения данных, которые должны быть переданы в json. Здесь
public class ForoModelWS
{
public string id;
public string text;
}
На стороне клиента у меня есть следующий код jquery:
<input id="theForo" />
<script type="text/javascript">
$(document).ready(function() {
$("#theForo").autocomplete({
source: function(request, response) {
$.ajax({
type: "post",
url: "/Foro/GetForos",
dataType: "json",
data: {
startsWith: request.term,
pageSize: 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.text,
value: item.text
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
Но скользящее окно с суггестиями не появляется. Если я поставлю предупреждение внутри функции ответа, я могу увидеть правильные данные.
Я что-то пропустил?
Спасибо за помощь
1st EDIT: Кроме того, как изменить код для использования свойства "id" выбранного элемента в возвращаемом списке?
2nd EDIT: Я проверил больше с помощью инструмента разработчика Chrome, и я видел, что при запуске автозаполнения появляется некоторая ошибка. следующее:
Uncaught TypeError: Cannot call method 'zIndex' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320
Кажется, что плагин autocomplete не находит элемент, когда он пытается установить z-Index подсказки скольжения 1 на своем контейнере. Первая ошибка появляется при открытии диалогового окна jquery UI. Вход для автозаполнения находится внутри вкладки jquery, которая находится внутри диалогового окна jquery
3rd EDIT: Я добавляю HTML-разметку, чтобы быть полным
<td width="40%">
<%= Html.LabelFor(model => model.ForoID)%>
<br />
<%= Html.HiddenFor(model => model.ForoID) %>
<input id="theForo" />
<%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>