Внутри диалогового окна jquery я хотел бы использовать функцию автозаполнения jquery 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
Кажется, что плагин автозаполнения не находит элемент, когда он пытается установить z-индекс скользящего предложения на 1 уровень выше его контейнера. Первая ошибка появляется, когда открывается диалоговое окно пользовательского интерфейса jquery. Ввод для автозаполнения находится внутри вкладки 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>