我已经使用了类别示例（http://jqueryui.com/autocomplete/#categories）的jQuery UI Autocomplete演示源代码并使其工作（查询返回JSON数组的数据库） .

我正在为艺术画廊 Build 搜索功能，我的类别是艺术家和展览 . 我想显示一个或两个类别的结果 . 我的问题是结果仅在搜索词涵盖两个类别的结果时显示 .

我的建议脚本使用搜索词来查询两个不同的数据库表 . 我将结果格式化并附加到单个JSON数组中，其中包含[“id”]，[“value”]，[“label”]和[“category”]的行 .

因此对于搜索词CORN，返回的结果可能是：

{ label: "Christopher Corner", category: "Artists" },
  { label: "New Pictures From Cornwall", category: "Exhibitions" },
  { label: "Cornie Collins", category: "Artists" },

在我输入搜索词的那一刻，只有在我的所有类别中都可以得到结果，而不是我想要的结果，只有一个或多个，才会显示可能的结果 . 因此，当我输入CORN时，我可以看到一个名为Corner的艺术家和一个关于康沃尔的展览，但是当我输入CORNE的E时，所有选项都会消失，包括名字为Corner的艺术家（我希望保留） .

我是jQuery和jQuery UI的新手，并且很难理解从任何类别而不是所有类别中选择列表项的逻辑 .

我已编辑添加我的代码 . 这是后端建议文件 - search_suggestions.php：

<?php

# if the 'term' variable is not sent with the request, exit
 if (!isset($_REQUEST['term'])) {
     exit;
 }

# retrieve the search term that autocomplete sends

$term = trim(strip_tags($_GET['term']));
$a_json = array();
$a_json_row = array();

# connect to database, send relevant query and retrieve recordset
include 'includes/db_access.php';

$compoundFind = $fm->newCompoundFindCommand('web_Artists');

$request1 = $fm->newFindRequest('web_Artists');
$request2 = $fm->newFindRequest('web_Artists'); 

$request1->addFindCriterion('Last name', '*'.$term.'*');
$request2->addFindCriterion('First name', '*'.$term.'*');

$compoundFind->add(1, $request1);
$compoundFind->add(2, $request2);

$compoundFind->addSortRule('Last name', 1, FILEMAKER_SORT_ASCEND);

$result = $compoundFind->execute();

if (FileMaker::isError($result)) {
    die();
}

$records = $result->getRecords();

# loop through records compiling JSON array

foreach ($records as $record) {

    $artistID = htmlentities(stripslashes($record->getRecordID())) ;
    $artistName = htmlentities(stripslashes($record->getField('Full name'))) ;

    $a_json_row["id"] = $artistID;
    $a_json_row["value"] = $artistName;
    $a_json_row["label"] = $artistName;
    $a_json_row["category"] = "Artists";
    array_push($a_json, $a_json_row);
}

$findCommand = $fm->newFindCommand('web_Exhibitions');
$findCommand->addFindCriterion('Title', '*'.$term.'*'); 
$result = $findCommand->execute();

if (FileMaker::isError($result)) {
    die();
}

$records = $result->getRecords();

    foreach ($records as $record) {

    $exhibitionID = htmlentities(stripslashes($record->getField('Exhibition ID'))) ;
    $exhibitionTitle = htmlentities(stripslashes($record->getField('Title'))) ;

    $a_json_row["id"] = $exhibitionID;
    $a_json_row["value"] = $exhibitionTitle;
    $a_json_row["label"] = $exhibitionTitle;
    $a_json_row["category"] = "Exhibitions";
    array_push($a_json, $a_json_row);
}

echo json_encode($a_json);
flush();
?>

这是我的部分中的JS，它设置了：

<style>
    .ui-autocomplete-category {
        font-weight: bold;
        padding: .2em .4em;
        margin: .8em 0 .2em;
        line-height: 1.5;
    }
</style>
<script>
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _create: function() {
            this._super();
            this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
        },
        _renderMenu: function( ul, items ) {
            var that = this,
              currentCategory = "";
            $.each( items, function( index, item) {
                var li;
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                li = that._renderItemData( ul, item );
                if ( item.category ) {
                    li.attr( "aria-label", item.category + " : " + item.label );
                }
            });
        }
    });
</script>
<script>
$(function() {
    $( "#searchInput" ).catcomplete({
        minLength: 2,
        source:'search_suggestions.php'
    });
});
</script>

最后，这是页面上的实际输入字段：

<input class="u-full-width" placeholder="Search" id="searchInput" />

对不起，如果这是太多的代码！

jquery-ui-autocomplete