JQuery автозаполнение не отображается

Question

Я просмотрел много предыдущих постов по этому поводу, но я думаю, что мой намного проще, чем то, что я нашел. Мое поле успешно запрашивает данные, но не отображает их. Я бы предположил, что это связано с CSS для его отображения. Я использую jQuery UI CSS для его отображения, как и на других сайтах, которые я разработал:

<link href="/css/console/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

Здесь я пытаюсь это отобразить. Что я здесь не так делаю? У меня это работает на других сайтах.

<input type="text" name="userSearch" id="userSearch"/>
<input class="button" style="top: -1px; margin-left: 5px;" type="button" value="SEARCH" />
<input type="hidden" id="hiddenUserWom" value="" /></span></div>
      <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
      <script type="text/javascript">
      $('#userSearch').autocomplete({
            source: '/console/ajax/user_search_autocomplete.php',
            minLength: 3,
            select: function (event, ui) {
                $("#userSearch").val(ui.item.label); 
                $("#hiddenUserWom").val(ui.item.id);
        }
      });

      $(document).ready( function () {
          $("#userSearch").focus();
      });
      </script>

Вот успешные возвращенные данные: Это пример возврата:

[{"label": "5U5NU - Девин Паркер - Вакавилль, Калифорния", "id": "5U5NU"}]

Описание формата данных для jQuery UI, взятое с официального сайта:

Ожидаемый формат данных

Данные из локальных данных, URL или обратного вызова могут быть в двух варианты:

Массив строк: ["Choice1", "Choice2"] Массив объектов с свойства метки и значения: [{label: "Choice1", значение: "value1"}, ...]

Это должно работать правильно.

Вот сайт: http://wombusiness.com/console/members/

Это поле поиска мощности, которое необходимо автозаполнить.

Answer 1

Поместите автозаполнение в ваш $ (документ) .ready

<input type="text" name="userSearch" id="userSearch"/>
<input class="button" style="top: -1px; margin-left: 5px;" type="button" value="SEARCH" />
<input type="hidden" id="hiddenUserWom" value="" /></span></div>
  <script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>
  <script type="text/javascript">


  $(document).ready( function () {
  $('#userSearch').autocomplete({
        source: '/console/ajax/user_search_autocomplete.php',
        minLength: 3,
        select: function (event, ui) {
            $("#userSearch").val(ui.item.label); 
            $("#hiddenUserWom").val(ui.item.id);
    }
  });
      $("#userSearch").focus();
  });
  </script>

Задача # 2 $ ("# userSearch"). Val (ui.item.label);Вы перезаписываете свое автозаполнение собственными данными.

Answer 2

Проблема в возврате из PHP.Если вы попытаетесь сделать то же самое, но с фиксированным набором в массиве в качестве источника, автозаполнение будет работать идеально.

Кодировка JSON выглядит нормально.

Я знаю, что она вам не нужна или вы ее используете, но попробуйте добавить value к каждому элементу.Я не уверен, но value может быть обязательным полем, и вам будет проще его проверить, чем мне.