Question

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

这样可以正常工作 - 如果我将两个表单字段放在一起，我可以键入任意一个并获取下面该数据源的自动完成结果。

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

我的想法是，如果我可以将自动完成的触发器方法从“焦点”更改为“键盘”，它将非常好用，或者如果我可以“伪造”焦点触发器而不将光标发送到隐藏字段。

有关于此的任何想法吗？

更新

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

$(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的示例（非常简单，没有排序等）

请参阅此小提琴页面了解一些内容（由于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（或添加您可能需要的新内容）

密钥上的jQuery UI自动完成？

1 个答案: