JQuery自动完成自定义显示多列第2部分

我试图得到一个类似于自动完成：在jquery ui中的自定义示例。

相反，它将使用ajax调用而不是硬编码数据。 我想要显示两列（值和描述）。 当用户输入时，.val（）将传递给ajax页面，并提供建议。 第一列将用于该值。

我能够使用简单的单列示例返回单个列，但不能使用多个值。 我认为它很简单，因为它是示例代码的重新哈希。 感谢您的帮助。

 $(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 $( "
" ) .data( "item.autocomplete", item ) .append( "" + item.value + "
" + item.desc + "" ) .appendTo( ul ); }; });  

beforeSend射击确定。 如果我添加：

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

…在dataType之后，它正确地提醒我[object Object]。

json看起来像：

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

json返回jsonlint传递validation。

_renderItem似乎不起作用。

任何指针或解决方案将不胜感激。

Answer 1

在$.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属性。