jQuery UI自动完成行为。如何在输入时搜索自由文本？

Posted 2021-03-31

第一个问题（希望，但可疑，我唯一的问题）

我正在使用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();
});

我尝试了上面的想法，我可以手动检测提交按键并提交表单，但警报显示检测到所有键除了提交，这似乎被自动完成抑制。

任何帮助是极大的赞赏！谢谢。

答案

UPDATE

我不得不做一些改动，但这样做之后，这段代码在我这边工作得很好。首先，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');
    }
});

另一答案

我遇到了类似的问题，当用户从列表中选择建议时，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() );
        }
    }
});

});

另一答案

使用UI自动完成插件版本1.8.5：

寻找这段代码

“case d.ENTER：case d.NUMPAD_ENTER：a.menu.element.is（”：visible“）&& c.preventDefault（）;”

并删除或评论它。

基本上是上面所说的，但是来自当前版本的插件。

干杯

皮特

另一答案

这就是我做的

<div class="ui-widget"> 
    <form action="javascript:alert('hey run some javascript code')">
        <input id="search"  />
    </form>
</div>

另一答案

自动填充提交已提交，但这对我来说是一种解决方法：

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)
    }
});

另一答案

我遇到了同样的问题，并且正在考虑使用验证来实现这一目标，但最终我的解决方案看起来比这个页面上的其他解决方案容易得多：

1. 创建一个输入字段以输入名为#input的文本和名为#hiddeninput的隐藏输入。您的搜索后端必须使用#hiddeninput的值。
2. 在自动完成内，将#hiddeninput的值设置为request.term :(我在$.ajax({ success: })中设置）

$（ “＃输入hiddeninput”）VAL（request.term）。

1. 使用select：-method设置自动完成，以使用所选的建议填充隐藏的输入：

select: function( event, ui ) {
  $("input#input").val(ui.item.label),
  $("input#hiddeninput").val(ui.item.nr),
  //Auto-submit upon selection
  $(this).closest("form").submit();
}

现在，您将对用户输入的内容执行搜索，直到他从建议列表中选择内容为止。

另一答案

<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'事件将使用列表中的第一项更新隐藏输入字段的值。他们也可以点击或从列表中选择。