Question

我是JSON的新手，并试图弄清楚如何使用一些格式化的响应来实现这个真正简单的自动完成。（我看到的所有jquery autocompletes都使用了我宁愿远离的巨大ui库。）

这是我到目前为止所做的：

$(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;

我做错了什么？提前谢谢。

Answer 1

我相信你需要先解析json：

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

Answer 2

对于初学者，您永远不会调用您的格式化功能

你有：

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/

Answer 3

简单的自动填充文本框

只需在<head>中包含JS库：

<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>

使用/ Javascript回调简单的JQuery AutoComplete来格式化响应

3 个答案: