JQuery Autocomplete Custom Display Multi-столбец Часть 2 - PullRequest
Новая
       9

JQuery Autocomplete Custom Display Multi-столбец Часть 2

0 голосов
/ 28 ноября 2011

Я пытаюсь получить аналог автозаполнения: Здесь в пользовательском примере jquery.

Вместо этого вместо жестко закодированных данных будет использоваться вызов ajax. У меня есть два столбца, которые я хочу показать (значение и описание). Когда пользователь вводит его, .val () передается на страницу ajax и предоставляет предложения. Один первый столбец будет использоваться для значения.

Мне удалось получить один возвращенный столбец, используя простой пример с одним столбцом, но не несколько значений. Я думаю, что это что-то простое, поскольку это повторный пример кода. Ваша помощь приветствуется. 

<script>
$(document).ready(function() { 
  $('#myinputbox').autocomplete({ 
      minLength: 4, 
      source: function(request, response){             
          var ajaxparam = $('#myinputbox').val(); 
          ajaxparam = escape(ajaxparam);                                                    
          var querystring = "?term=" + ajaxparam;  
          $.ajax({
              url:      'ajax/jsonencode.php'+querystring,
              beforeSend: function(){
                alert("beforeSend");
              },
              async:    true,
              dataType: "json"
          });
      },
      focus: function ( event,ui ){     
          $( "#myinputbox" ).val( ui.item.value );
          return false;            
      },  
      select: function( event, ui ) {          
              $( "#myinputbox" ).val( ui.item.value );
              return false;
      }        

  })
  .data( "autocomplete" )._renderItem = function( ul, item ) {
          return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append( "<a>" + item.value + "<br>" + item.desc + "</a>" )
                  .appendTo( ul );
  };  
}); 
</script>

beforeSend хорошо. Если я добавлю: 

                success: function(data){
                  alert(data);
                }

... после dataType он правильно предупреждает меня [объект объекта].

JSON выглядит так: 

[
  {
      "value": "value1",
      "desc": "Description 1"
  },
  {
      "value": "value2",
      "desc": "Description 2"
  }
]

Возвращенный json проходит проверку в jsonlint.

_renderItem, похоже, не работает.

Буду признателен за любые указатели или решение.

1 Ответ

2 голосов
/ 28 ноября 2011

В вашем $.ajax вызове вы не указываете success обратный вызов: 

$.ajax({
    url: 'ajax/jsonencode.php'+querystring,
    beforeSend: function(){
        alert("beforeSend");
    },
    async:    true,
    dataType: "json"
});

Поскольку виджет ожидает, что вы вызовете функцию response для предоставления предложений, вы должны сделать что-то вроде этого: 

$.ajax({
    url: 'ajax/jsonencode.php'+querystring,
    beforeSend: function(){
        alert("beforeSend");
    },
    async:    true,
    dataType: "json",
    success: response
});

Предполагается, что ваши данные имеют как минимум свойство label или value.

...