jQuery UI是否在键启动时自动完成?

wbrvyc0a  于 2023-01-30  发布在  jQuery
关注(0)|答案(1)|浏览(101)

我正在使用jQuery UI库的autocomplete功能,我在网页上有两个表单字段-一个是内部搜索,另一个是通过REST API搜索我的公司在第三方网站上管理的内容。
这样就可以正常工作了--如果我有两个表单域,它们彼此相邻,我可以在其中一个中键入内容,然后获得下面那个数据源的自动完成结果。
但是,我被要求做的是将这两个字段合并成一个"master"搜索字段,并隐藏两个单独的字段,这样就可以在两个数据源中搜索用户的输入,并在字段下面单独的用户界面自动完成框中显示结果。
我的想法是,如果我可以将自动完成的触发方法从"focus"改为"keyup",它将非常好地工作,或者如果我可以"伪造" focus触发而不将光标发送到隐藏字段。
有什么想法吗?

    • 更新日期:**

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

$(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。但这并不调用自动完成函数。
非常感谢。

bnl4lu3b

bnl4lu3b1#

我在这里的第一个想法是隐藏原始字段(如果你想的话,在焦点上),并在单独的焦点事件之前或结合单独的焦点事件注入一个新字段,然后建议你管理自动完成源:

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 concat的例子(非常简单,没有排序等)
查看这个fiddle页面了解一些东西(由于json AJAX 不存在,所以没有按原样运行,但我希望你可以使用它)http://jsfiddle.net/MarkSchultheiss/Z6rVE/
正如所编写的那样,它假定json具有MyCode、Description和SourceTable

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

您只需要每个源都表示SourceTable(或者添加您可能需要的新内容)

相关问题