Question

jquery ui网站上有很好的文档显示分类为http://jqueryui.com/demos/autocomplete/#categories的自动完成选项

还有一个关于显示远程建议的示例。 http://jqueryui.com/demos/autocomplete/#remote

但我想要的是加载从远程源分类的自动完成选项。我怎样才能做到这一点？任何人都可以指出示例或一些代码片段吗？我一直在尝试这个。如果我的search.php可以生成分类建议所需的源。我如何在前端实现它？

我能够从我的php中生成返回。（这就是分类自动完成所需的）

                    [
   { label: "anders", category: "" },
   { label: "andreas", category: "" },
   { label: "antal", category: "" },
   { label: "annhhx10", category: "Products" },
   { label: "annk K12", category: "Products" },
   { label: "annttop C13", category: "Products" },
   { label: "anders andersson", category: "People" },
   { label: "andreas andersson", category: "People" },
   { label: "andreas johnson", category: "People" }
   ];

但我如何在前端实施？这是站点中远程源代码可用的代码。我如何指定php将为分类建议提供结果？

 <script>
 $(function() {
  function log( message ) {
   $( "<div/>" ).text( message ).prependTo( "#log" );
   $( "#log" ).attr( "scrollTop", 0 );
  }

  $( "#birds" ).autocomplete({
   source: "search.php",
   minLength: 2,
   select: function( event, ui ) {
    log( ui.item ?
     "Selected: " + ui.item.value + " aka " + ui.item.id :
     "Nothing selected, input was " + this.value );
   }
  });
 });
 </script>

Answer 1

jqueryui网站上的示例看起来像是可行的。你试过吗？您只需要“覆盖”_renderItem方法，如类别示例所示。

这有用吗？

<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });
    }
});

$( "#search" ).catcomplete({
    source: 'search.php'
});
</script>

Answer 2

如果请求转到PHP并且没有返回任何内容，请确保您有一个由JQuery发送的回调值，并使用JSON返回它。

$callback = $_GET['callback'];
$echo $callback.'('.json_encode($yourresultarray).')';

从远程源分类的Jquery UI自动完成

2 个答案: