autocomplete выводит список не там
Добрый день.
Пытаюсь сделать список для автозаполнения:
$(function() {
$( "#userSearch" ).autocomplete({
source: function(request, response){
$.post("/usr/friends/listUserSearchAjax", {data:request.term}, function(data){
response($.map(data, function(item) {
return {
label: item.label,
value: item.label,
id: item.id
}
}))
}, "json");
},
minLength: 2,
cache: false
});
});
<input type="text" name="search" id="userSearch"> Сервер возвращает:
[{"label":"orange","id":"l_25"},{"label":"apple","id":"l_38"},{"label":"banana","id":"l_44"}]
Список появляется, но совсем в другом месте и совсем не оформленный. Над самим инпутом появляется надпись о готовности: "3 results are available, use up and down arrow keys to navigate." Подскажите, пожалуйста, что я делаю не правильно? |
culver,
откуда вы взяли строку 9 ? |
убрал 9 строку с запятой перед ней - не помогло
|
Надпись "3 results are available, use up and down arrow keys to navigate." убрал с помощью
.ui-helper-hidden-accessible {
display: none;
}
в стилях, а список так нормально и не отображается |
culver, смотрите что у вас не так ...для теста пишем or выбираем orange вставляется l_25
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select: </label>
<input id="userSearch">
<script>
var data = [{"label":"orange","id":"l_25"},{"label":"apple","id":"l_38"},{"label":"banana","id":"l_44"}];
$( "#userSearch" ).autocomplete({
source: function( request, response ) {
response($.map(data, function(item) {
return {
label: item.label,
value: item.id
}
}))
},
minLength: 2,
cache: false
});
</script>
</body>
</html>
|
Ну почему же
Цитата:
у меня value: item.label. Названия выводятся нормально, но выводятся не там где нужно. Ковыряюсь дальше и обнаружил, что ширина списка, почему то, вы ставляется 1807px. Вот что формируется: <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="width: 1807px; position: relative; top: 195px; left: 415px;"> <li class="ui-menu-item" role="presentation"> <a id="ui-id-2" class="ui-corner-all" tabindex="-1">orange</a> </li> <li class="ui-menu-item" role="presentation"> <a id="ui-id-3" class="ui-corner-all" tabindex="-1">apple</a> </li> <li class="ui-menu-item" role="presentation"> <a id="ui-id-4" class="ui-corner-all" tabindex="-1">banana</a> </li> </ul> |
culver,
если с данными всё в порядке смотрите структуру вашего html и css - что и как у вас формируется видно только вам |
Но ведь стиль элемента ul формирует сам плагин. Я имею ввиду строку
style="width: 1807px; position: relative; top: 195px; left: 415px;"Кроме того, скомпилированная высота первого li составляет 163, хотя где это указано в коде я не найду. |
Цитата:
#userSearch {
width: 100%;
}
|
Это у меня стоит, но это стиль инпута, а у меня список расплывается.
|
| Часовой пояс GMT +3, время: 16:12. |