JQuery的自动完成自定义显示多列第2 [英] JQuery Autocomplete Custom Display Multi-column Part 2

问题描述

我试图得到一个自动完成类同：
在其定制例如jQuery UI的这里。

这反而会使用Ajax调用，而不是硬codeD数据。我有两列，我希望显示（A值和说明）。作为用户在键入它的.VAL（）被传递到AJAX页，并提供建议。一第一列将用于的值。结果，

我能得到单列返回使用一个简单的例子列，而不是多个值。我想这是简单的东西，因为它是例如code的再哈希值。你的帮助是AP preciated。

I am trying to get an autocomplete similiar to: Here at jquery ui in their custom example.

This instead will use an ajax call instead of hard-coded data. I have two columns that I wish to show (a value and description). As the user is typing it in, the .val() is passed to the ajax page, and it provides the suggestions. One the first column will be used for the value.

I was able to get a single column returned using a simple one-column example, but not multiple values. I am thinking it is something simple, since it is a re-hash of example code. Your help is appreciated.

<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触发确定。如果我补充一下：

beforeSend fires ok. If I add:

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

...具体的数据类型之后，正确地提醒我[对象的对象。

...after the dataType, it properly alerts me [object Object].

JSON的样子：

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

将JSON返回在jsonlint通过验证。

该_renderItem似乎并没有工作。

任何指针或解决方案将是AP preciated。

The json returned passes validation at jsonlint.

The _renderItem does not seem to work.

Any pointers or solution would be appreciated.

推荐答案

在你的 $。阿贾克斯电话，你不指定成功回调：

In your $.ajax call, you're not specifying a success callback:

$.ajax({
    url: 'ajax/jsonencode.php'+querystring,
    beforeSend: function(){
        alert("beforeSend");
    },
    async:    true,
    dataType: "json"
});

由于小部件希望你调用响应功能来提供建议，你应该做的是这样的：

Since the widget expects you to invoke the response function to supply the suggestions, you should do something like this:

$.ajax({
    url: 'ajax/jsonencode.php'+querystring,
    beforeSend: function(){
        alert("beforeSend");
    },
    async:    true,
    dataType: "json",
    success: response
});

这是假设你的数据至少有一个标签或值属性。

That assumes your data has at least a label or value property.

这篇关于JQuery的自动完成自定义显示多列第2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！