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

Question

我正在尝试获得类似于以下内容的自动完成功能： Here 在 jquery ui 在他们的自定义示例中。

这将使用 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 之后，它会正确地提醒我 [object Object]。

json 看起来像：

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

返回的 json 通过 jsonlint 的验证。

_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 属性。