第一个问题(希望,但可疑,但我唯一的问题)
我正在使用jQuery UI Autocomplete。以下是复制我的问题的示例代码。
var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
source: suggestions
});
当用户输入'J'时,他们会看到'Clojure'和'JavaScript'作为建议。
我已从此列表中省略了Java,如果用户想要搜索Java,则键入“Java”,按回车键但表单不提交。如果添加空格,则“JavaScript”建议消失,并且可以通过按Enter键提交表单。
我正在创建一个免费搜索,我希望用户能够通过按Enter键进行搜索,即使有可用的建议。
$("#autocomplete").keypress(function(event) {
alert(event.keyCode);
if (event.keyCode=='13') $this.closest('form').submit();
});
我尝试了上述想法,我可以手动检测提交按键并提交表单,但警报显示检测到所有密钥除了提交,似乎被自动完成功能抑制。
非常感谢任何帮助!感谢。
答案 0 :(得分:8)
<强>更新强>
我不得不做一些更改,但这样做之后,这段代码在我这边工作得很好。首先,e.keycode应该是e.keyCode。我不认为这个案例很重要,但确实如此。另外,当您检查keyCode是否为enter按钮时,请确保没有引用13。如果你这样做,它将无法正常工作。这是新代码:
var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
source: suggestions
}).keypress(function(e) {
if (e.keyCode === 13) {
$(this).closest('form').trigger('submit');
}
});
按键功能应如下所示,此外,您还可以链接自动完成功能和按键功能,以方便您使用。下面的代码应该可行。
var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
source: suggestions
}).keypress(function(e) {
if (e.keycode === 13) {
$(this).closest('form').trigger('submit');
}
});
答案 1 :(得分:2)
我遇到了类似的问题,当用户从列表中选择建议时,jquery-ui自动完成小部件会触发select事件,无论是单击了所选建议还是按下了回车键。但是如果用户键入文本并按下回车键而没有从列表中选择一个项目,它就什么也没做。当发生这种情况时,我需要进行搜索。
很容易添加一个keypress
事件处理程序,但它会触发是否已经进行了选择。所以我添加了一个变量didSelect
来维持选择状态。
以下是完整的解决方案:
$(function() {
var didSelect = false;
$( "#search" ).autocomplete({
source: "/my_remote_search",
minLength: 2,
search: function (event, ui) {
didSelect = false;
return true;
},
select: function( event, ui ) {
if (ui.item) {
didSelect = true;
my_select_function(ui.item);
}
}
}).keypress(function(e) {
if (e.keyCode == 13) {
if ( ! didSelect ) {
my_search_function( $("#search").val() );
}
}
});
});
答案 2 :(得分:1)
自动填充提交提交,但这对我来说是一种解决方法:
jQuery.fn.go_url = function(id) {
var url="gl10.pl?ar=2010&listi=ts&niv=stovnsnr&rl=1290693052914&stovnsnr=replaceme";
var ok;
if (ok=id.match(/^\d{6}$/)) {
url=url.replace(/replaceme/g,id);
location=url;
}
}
jQuery(function() {
jQuery( "#stovnar" ).autocomplete({
source: "autocomplete.pl?pname=stovnsnr",
minLength: 3,
select: function( event, ui ) { if (ui.item) { jQuery.fn.go_url(ui.item.id); } }
});
}).keypress(function(e) {
if (e.keyCode === 13) {
v=jQuery("#stovnar").val();
jQuery.fn.go_url(v)
}
});
答案 3 :(得分:1)
使用UI自动完成插件版本1.8.5:
寻找这段代码
“case d.ENTER:case d.NUMPAD_ENTER:a.menu.element.is(”:visible“)&amp;&amp; c.preventDefault();”
并删除或评论它。
基本上是上面所说的,但是来自当前版本的插件。
欢呼声
皮特
答案 4 :(得分:1)
这就是我做的事情
<div class="ui-widget">
<form action="javascript:alert('hey run some javascript code')">
<input id="search" />
</form>
</div>
答案 5 :(得分:0)
我遇到了同样的问题,并且正在考虑使用验证来实现这一目标,但最终我的解决方案看起来比这个页面上的其他解决方案容易得多:
创建一个输入字段以输入名为#input
的文本和名为#hiddeninput
的隐藏输入。您的搜索后端必须使用#hiddeninput
的值。
在自动填充功能中,将#hiddeninput的值设置为request.term :(我在$.ajax({ success: })
内设置此项)
$( “输入#hiddeninput”)VAL(request.term);
select: function( event, ui ) { $("input#input").val(ui.item.label), $("input#hiddeninput").val(ui.item.nr), //Auto-submit upon selection $(this).closest("form").submit(); }
现在,您将对用户输入的内容执行搜索,直到他从建议列表中选择内容为止。
答案 6 :(得分:0)
<script>
$(function() {
$('#student').autocomplete({
source: '../ajx/student_list.php',
minLength: 3,
response: function( event, ui ) {
$('#student_id').val(ui.content[0].id);
},
select: function( event, ui ) {
$('#student_id').val(ui.item.id);
$(this).closest('form').trigger('submit');
}
}).keypress(function(e) {
if (e.keyCode === 13) {
$(this).closest('form').trigger('submit');
}
});
});
</script>
<div>
<form action='../app/student_view.php'>
<input name='student_id' id='student_id' type='hidden' value=''>
<label for='student'>Student: </label>
<input id='student' />
</form>
</div>
我在这里使用自动填充来搜索学生。如果用户按下ENTER,表单将提交,即使从列表中未选择任何内容。 'response'事件将使用列表中的第一项更新隐藏输入字段的值。他们也可以点击或从列表中选择。