文章/答案/技术大牛

发布

社区首页 >问答首页 >使用类别自动完成jQuery UI

问使用类别自动完成jQuery UI
EN

Stack Overflow用户

提问于 2010-10-10 09:25:43

回答 2查看 12.8K关注 0票数 6

我正在使用jQuery UI的自动完成功能为搜索输入框提供来自远程来源的建议。我已经得到了“远程数据源”的例子。例如，这是可行的：

    $("#search").autocomplete({
        source: "search_basic.php",
        minLength: 2
    });

但是，我想使用"Categories“示例来按类别对建议进行排序。来自jQuery UI站点的示例使用了一组内联数据：

       <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 );
   });
  }
 });

 $(function() {
  var data = [
   { 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" }
  ];

  $( "#search" ).catcomplete({
   delay: 0,
   source: data
  });
 });
 </script>

但是，当我尝试从我的远程文件中获取数据时

source: 'search.php'

它没有暗示任何东西。下面是search.php的代码：

    <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 );
   });
  }
 });

 $(function() {

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

search.php返回的数据格式正确：

         [
 { label: "annhhx10", category: "Products" },
 { label: "annttop", category: "Products" },
 { label: "anders", category: "People" },
 { label: "andreas", category: "People" }
 ]

任何帮助都将不胜感激！

谢谢，格雷格

autocomplete

回答 2

Stack Overflow用户

发布于 2013-04-26 15:40:50

自从我迁移到UI1.10.2后，我的小部件就不能工作了！

只是对这条线的修改：

self._renderItem( ul, item );

这就变成了：

self._renderItemData( ul, item );

这又起作用了！

票数 6

Stack Overflow用户

发布于 2010-10-10 10:20:11

您的PHP文件可能没有返回正确的头文件。将此代码添加到PHP文件中：

header('Content-Type: application/json');

然后，浏览器会将响应解释为JSON并对其执行操作。

编辑：

在响应中返回JSON时，您的响应还需要在标签周围加上引号，而不仅仅是值。在PHP中，在对象数组上使用json_encode()将返回以下JSON (添加了换行符)：

[
 { "label": "annhhx10", "category": "Products" },
 { "label": "annttop", "category": "Products" },
 { "label": "anders", "category": "People" },
 { "label": "andreas", "category": "People" }
]

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3898596

复制

相似问题

问使用类别自动完成jQuery UI
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用类别自动完成jQuery UIEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用类别自动完成jQuery UI
EN