Jquery 自动完成 - 将响应更改为 <tab> 和 <enter> 击键

Question

我的网站上有一个正常工作的自动完成框，我想像 SO 中的“标签”自动完成一样工作。

期望的行为

看到下拉建议后，点击键盘上的tab 或enter 会“接受”突出显示的选项，添加一个空格，并将焦点移到行尾以输入下一个标签.

当前行为

获得下拉菜单后，点击tab 或enter 会将文本框的全部内容替换为当前建议，并且光标会选择所有文本（而不是插入空格并指向行）。

我怎样才能实现这种响应？

---

这是我的javascript：

$(function() { 
$( "#tags-field" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "autocomplete" ).menu.active ) {
            event.preventDefault();
        }
    })
    .autocomplete({
      source: function( request, response ) {
        $.ajax({
            url: "<%= autocomplete_tags_name_questions_url %>",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function( data ) {
                alert("Hi!"),
                response( $.map( data, function( item ) {
                    return {
                        label: item.name, //+ (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                }));
            }
        });
      },
      minLength: 2
  });
});

首先，顶部的.bind 部分似乎不起作用。如何使代码here 与上面的代码相一致？

Answer 1

查看multiple values demo。