jQuery UI键盘自动完成功能? [英] jQuery UI Autocomplete on keyup?

问题描述

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

I'm working with the jQuery UI library's autocomplete functionality. I have two form fields on a webpage - one is internal search, and one searches content my company manages on a third party site via a REST API.

这可以正常工作-如果我有两个相邻的表单字段，则可以键入其中任意一个，并在下面获取该数据源的自动完成结果.

This works as it should - if I have the two form fields sitting next to each other, I can type into either and get the autocomplete results for that datasource below.

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

What I've been asked to do, though, is combine the two fields into one "master" search field and hide the two individual fields. It would search both data sources for the user's input, and display the results in separate ui-autocomplete boxes below the field.

我的想法是，如果我可以将自动完成的触发方法从焦点"更改为键"，那么它将很好地工作，或者如果我可以伪造"焦点触发而不将光标发送到隐藏字段.

My idea is that if I could just change the trigger method for autocomplete from "focus" to "keyup" it would work very nicely, or if I could "fake" the focus trigger without sending the cursor to the hidden field.

对此有何想法?

更新:

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

Here's the code I've been trying, and it doesn't work. This is what lead me to think I was dependent on the focus event.

$(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.不过，这并不称为自动完成功能.

So you can see, I take the two form fields that the HTML contains, and make sure they call the working autocomplete function. Then I use jQuery to add another form to the DOM, and when it gets a keyup it adds its contents to one of the other fields, and gives that field a keyup. This doesn't call the autocomplete, though.

非常感谢.

推荐答案

我在这里的第一个想法是隐藏原始字段(如果需要，可以将焦点放在焦点上)，然后在单个焦点事件之前或与之结合后插入一个新字段，然后建议您管理自动填充源:

My first thought here is to hide the original fields (on focus if you want) and inject a new one prior to or in combination with the individual focus events then suggest you manage the autocomplete source:

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

之后，您可以使用以下几种组合来处理结果:

THEN, you can handle the results using some combination of:

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

这将有助于避免对条目状态的任何幻想/复杂管理，然后您就可以管理结果显示.

This would help avoid any fancy/complicated management of entry state and you can then manage the results presentation.

多个ajax concat的示例(非常简单，没有排序等)

Example of multiple ajax concats (very simple and no sorting etc)

请参见此小提琴页面中的一些内容(由于不存在json ajax，所以不能按原样运行，但我希望可以使用它) http://jsfiddle.net/MarkSchultheiss/Z6rVE/

See this fiddle page for some stuff (does not run as-is due to the json ajax not being present but you can work with it I hope) http://jsfiddle.net/MarkSchultheiss/Z6rVE/

按照书面规定，它假定具有MyCode，Description和SourceTable的json

As written, it assumes a json with MyCode, Description, and SourceTable

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

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

you just need each source to say the SourceTable (or add new stuff you might need)

这篇关于jQuery UI键盘自动完成功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！