Форум

culver · #1 (**permalink**) 21.06.2014, 12:34

Добрый день.
Пытаюсь сделать список для автозаполнения:

$(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."
Подскажите, пожалуйста, что я делаю не правильно?

рони · #2 (**permalink**) 21.06.2014, 13:22

culver,
откуда вы взяли строку 9 ?

culver · #3 (**permalink**) 21.06.2014, 13:39

убрал 9 строку с запятой перед ней - не помогло

culver · #4 (**permalink**) 21.06.2014, 13:41

Надпись "3 results are available, use up and down arrow keys to navigate." убрал с помощью

.ui-helper-hidden-accessible {
					display: none;
			}

в стилях, а список так нормально и не отображается

рони · #5 (**permalink**) 21.06.2014, 13:55

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>

culver · #6 (**permalink**) 21.06.2014, 14:08

Ну почему же

Цитата:

value: item.id

,
у меня

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>

рони · #7 (**permalink**) 21.06.2014, 14:14

culver,
если с данными всё в порядке смотрите структуру вашего html и css - что и как у вас формируется видно только вам

culver · #8 (**permalink**) 21.06.2014, 14:19

Но ведь стиль элемента ul формирует сам плагин. Я имею ввиду строку

style="width: 1807px; position: relative; top: 195px; left: 415px;"

Кроме того, скомпилированная высота первого li составляет 163, хотя где это указано в коде я не найду.

рони · #9 (**permalink**) 21.06.2014, 14:35

Сообщение от culver

width: 1807px

а вам это ни о чём не говорит типа css

#userSearch {
    width: 100%;
  }

culver · #10 (**permalink**) 21.06.2014, 14:49

Это у меня стоит, но это стиль инпута, а у меня список расплывается.

Форум

Справочник

Discord чат

Курсы javascript