Простое автозаполнение JQuery с обратным вызовом Javascript для форматирования ответа

Я новичок в JSON и пытаюсь выяснить, как заставить это действительно простое автозаполнение работать с некоторым форматированным ответом. (все автозаполнения jquery, которые я вижу, используют огромную библиотеку пользовательского интерфейса, от которой я бы предпочел держаться подальше).

Это то, что я до сих пор:

$(function() {
     // u check
     $('#search-input').keyup(function() { 
     $.ajax({ 
            dataType: 'jsonp',
            type: "POST", 
            url: "/includes/myautocomplete/tags.php", 
            data: "callback=autocomplete&q="+$('#search-input').val(), 
            jsonp: 'autocomplete',
            success: function(json){
                $('#search-resp').html(json);
            }
        });
    }); 

});

Я пытаюсь отформатировать ответ с помощью:

function autocomplete(json) {
  var html ='<ul>';
  for(i=0;i<json.length;i++) {
    var n = json[i];
    html = '<li>'+n['tagname']+'</li>';
  }
  html = '</ul>';
  return html;
}

Мой PHP выглядит так:

# JSON-encode the response
$json_response = json_encode($array);

# Optionally: Wrap the response in a callback function for JSONP cross-domain support
if($_POST["callback"]) {
   $json_response = $_POST["callback"] . "(" . $json_response . ")";
}

# Return the response
echo $json_response;

Что я делаю неправильно? Заранее спасибо.

3 ответа

Я считаю, что вам нужно сначала проанализировать JSON:

success: function(data){
  var json = $.parseJSON(data);
  //then display it...
}

Простое текстовое поле автозаполнения

Просто включите библиотеку JS в <head>:

<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>

В <body> тег:

<input type="text" name="testne" id="testneer" onkeypress="IP_autoComplete('http://services.iperfect.net/ajax/countries.php?name=',this.id,'testDiv',event,'')">
<div id='testDiv'></div>

Для начала вы никогда не вызываете функцию форматирования

У тебя есть:

success: function(json){
      $('#search-resp').html(json);
}

который пытается вставить объект полного ответа в элемент в виде HTML.

Предполагая ваш autocomplete Функция правильно анализирует возвращенный массив или объект, ваш код должен выглядеть так:

success: function(json){
      var jsonFormattedToHtml=autocomplete(json)
      $('#search-resp').html(jsonFormattedToHtml);
}

РЕДАКТИРОВАТЬ

Ваш HTML-код fomatting имеет несколько недостатков.

Самое большое, что вам нужно объединить html используя html += вместо html= после того, как вы впервые определите это. С помощью = только стирает любое ранее установленное значение, поэтому вывод вашей функции будет просто закрытием </ul> только.

Также свойства объекта в форматере не соответствуют показанным данным.

Вот рабочая демка

http://jsfiddle.net/vgbK8/2/

Другие вопросы по тегам