Question

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

相反，它将使用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属性。

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

1 个答案: