Javascript 带有远程结果和缓存的jQuery类别搜索

我正在尝试使用为我的网站创建一个搜索框，该搜索框将搜索位于“/search_basic.php”的另一个文件中的结果（下面列出了文件内容）。我想对结果进行分类并缓存在浏览器中，以备将来使用。如果没有结果，也应通知用户。除了从远程文件中提取结果和缓存外，我可以分别执行这些操作。我不知道如何使我的项目作为一个整体运作

以下是我正在使用的代码：

HTML5：

<div class="ui-widget">
    <label for="search">Search: </label>
    <input id="search" />
    <p id="empty-message"></p>
</div>

JQuery：

<script>
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
    var that = this,
    currentCategory = "";
    $.each( items, function( index, item ) {
    if ( item.category != currentCategory ) {
    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
    currentCategory = item.category;
    }
    that._renderItemData( ul, item );
    });
    }
    });
</script>
<script>
    $(function() {
        var cache ={};
        $( "#search" ).catcomplete({
            minLength: 0,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }
                $.getJSON( "search_basic.php", request, function( data, status, xhr ) { // Remote results file is located at search_basic.php
                    cache[ term ] = data;
                    response( data );
                });

                // If there are no results notify the user
                if (ui.content.length === 0) {
                    $("#empty-message").text("No results found");
                } else {
                    $("#empty-message").empty();
                }
            }
        });
    });
</script>

提前谢谢你

---

更新1：我让jQueryUI的远程示例在我的服务器上运行，但是如果没有它返回的额外数据，它很难修改实现。并且可以在下载部分下载以查看远程json PHP文件（抱歉，我无法添加更多具有SO声誉的链接）。

我认为空结果的通知应该在

响应

事件中处理：

试试这个：

$(function() {
    var cache ={};
    $( "#search" ).catcomplete({
        minLength: 0,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }
            $.getJSON( "search_basic.php", request, function( data, status, xhr ) { // Remote results file is located at search_basic.php
                cache[ term ] = data;
                response( data );
            });   
        },
        response: function(event,ui){
            // If there are no results notify the user
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});

---

我尝试用你的代码替换，但是我仍然有一个问题，没有显示任何内容。根据我的调试器，浏览器正在连接到search_basic.php文件以查找结果，但是对于用户来说，什么都没有显示，只是看起来他们正在空白框中键入内容。我还在一个实时服务器上测试了这段代码，得到了相同的结果。有什么想法吗@block14要开始调试，为什么不删除自定义的_renderMenu函数，让

search_basic.php

返回属性为“value”而不是“category”的对象，让我们看看是否可以先让远程源代码工作简单一点！我尝试了你的建议，得到了我先前评论中提到的相同结果。为了进一步简化，我复制了上的示例，但是我无法下载他们的search.php文件来检查其格式。我想可能是我的远程文件search_basic.php格式不正确？@block14我想你没有在json文件中生成任何输出，请尝试使用类似于

头（'Content-Type:application/json'）的echo；回音“[{”标签“：”annhhx10“，”类别“：”产品“}，{”标签“：”annttop“，”类别“：”产品“}，{”标签“：”安德烈亚斯“，”类别“：”人“}”但将“category”更改为“value”，因为文档表明这是预期的对象结构将echo更改为该格式也不起作用（为了确认，我将“category”更改为“value”）。另一方面，我设法找到了如何让jQueryUI的远程示例工作的方法：我找到了它们的。在更正一些脚本引用并将其上载到服务器后，它正确地返回了建议和数据（尽管有一些无关的脚本错误）。我正在查看这个PHP文件，看看它是否包含生成正确输出的任何线索。
header('Content-Type: application/json');

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

$(function() {
    var cache ={};
    $( "#search" ).catcomplete({
        minLength: 0,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }
            $.getJSON( "search_basic.php", request, function( data, status, xhr ) { // Remote results file is located at search_basic.php
                cache[ term ] = data;
                response( data );
            });   
        },
        response: function(event,ui){
            // If there are no results notify the user
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});