键盘上的jQuery UI自动完成？

Question

我正在使用 jQuery UI 库的 autocomplete 功能。我在网页上有两个表单域 - 一个是内部搜索，另一个是搜索我公司通过 REST API 在第三方网站上管理的内容。

这可以正常工作 - 如果我有两个表单字段并排放置，我可以输入其中一个并在下面获取该数据源的自动完成结果。

不过，我被要求做的是将这两个字段合并为一个“主”搜索字段并隐藏两个单独的字段。它会在两个数据源中搜索用户的输入，并将结果显示在字段下方单独的 ui-autocomplete 框中。

我的想法是，如果我可以将自动完成的触发方法从“focus”更改为“keyup”，它会很好地工作，或者如果我可以“伪造”焦点触发器而不将光标发送到隐藏字段。

对此有什么想法吗？

更新：

这是我一直在尝试的代码，但它不起作用。这就是让我认为我依赖于焦点事件的原因。

$(function(){
// run autocomplete on form fields
searchAutocomplete('/support/results_json/','#keywords');
searchAutocomplete('/support/zdresults_json/','#zd_search');
//$('#ee_searchform').hide(); // will need this later
//$('#zd_searchform').hide(); // will need this later
$('<form id="support_search" class="group" method=""><fieldset><legend>Search Support</legend><ol><li><label for="support_keywords">Keywords</label><input type="search" value="" name="support_keywords" id="support_keywords" /></li><li class="submit"><input type="submit" name="support_submit" id="support_submit" value="Search" /></li></ol></form>').insertAfter('#zd_searchform');

$('#support_keywords').keyup(function() {
  var value = $('#support_keywords').val();
    $('#keywords').val(value);
    $('#keywords').keyup();
}); 
});

所以您可以看到，我采用 HTML 包含的两个表单字段，并确保它们调用工作的自动完成功能。然后我使用 jQuery 向 DOM 添加另一个表单，当它获得一个 keyup 时，它会将其内容添加到其他字段之一，并为该字段提供一个 keyup。不过，这不会调用自动完成功能。

非常感谢。

Answer 1

我在这里的第一个想法是隐藏原始字段（如果需要，可以在焦点上）并在单个焦点事件之前或结合单个焦点事件注入一个新字段，然后建议您管理自动完成源：

source: function(request, response)
    {
        // do both your ajax calls here and combine your results prior to providing to your field
    }

那么，您可以使用以下组合处理结果：

source: function(request, response)
            {response(rows);},//where rows is an array of results
search:function(event, ui){},
focus:function(event, ui){},
open:function(event, ui){},

最后

select: function(event, ui)
            {}//handle what to do with the selection of/from the results list

这将有助于避免对入口状态进行任何花哨/复杂的管理，然后您可以管理结果呈现。

编辑：多个 ajax concats 的示例（非常简单，没有排序等）

查看this fiddle page了解一些内容（由于不存在json ajax，因此无法按原样运行，但我希望您可以使用它） http://jsfiddle.net/MarkSchultheiss/Z6rVE/

正如所写，它假定一个带有 MyCode、Description 和 SourceTable 的 json

[{"MyCode":"code","Description":"my desc","SourceTable":"mysource"},{"MyCode":"code","Description":"my desc","SourceTable":"mysource"}]

您只需要每个来源说出 SourceTable（或添加您可能需要的新内容）