如何使用返回键触发 javascript 生成的 HTML 列表项

Question

我刚刚在我的网站内实现了一个 Javascript 自动完成搜索框，但我可以触发子页面链接的唯一方法是用鼠标单击列表项。 我想要做的是，除了可以使用已经实现的键盘进行选择之外，还可以点击键盘上的“return”键并转到所选的登录页面。

我使用的Js是：

<script>
$(function() {
var projects = [
  {
    value: "value1",
    label: "value1",
    desc: "descr1",
    icon: "icon1.png",
link: "http://url1"
  },
  {
    value: "value2",
    label: "value2",
    desc: "descr2",
    icon: "icon2.png",
link: "http://url2"
  }
];

$( "#project" ).autocomplete({
  minLength: 2,
  source: projects,
  focus: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    return false;
  },
  select: function( event, ui ) {
    $( "#project" ).val( ui.item.label );
    $( "#project-id" ).val( ui.item.value );
    $( "#project-description" ).html( ui.item.desc );
    $( "#project-icon" ).attr( "src", ui.item.icon );
    return false;
  }
})

.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a href='" + item.link + "'>" + "<img style='height:35px;' src='" + item.icon + "'/>" + "  " + item.label + " - " + item.desc + "</a>" )
    .appendTo( ul );
};
});
</script>

我使用的 HTML 是：

<input id="project"></div>

您可以在此处查看示例：http://www.lolgame.it/lolgame-counterpicks/

非常感谢大家

Answer 1

我们走吧。在这里测试：http://jsfiddle.net/agWH2/

$( "#project" ).autocomplete({
      minLength: 1,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        if (event.keyCode == 13) {
          window.location.href = ui.item.link;
        }
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", ui.item.icon );
        return false;
      }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a href='" + item.link + "'>" + "<img style='height:35px;' src='" + item.icon + "'/>" + "  " + item.label + " - " + item.desc + "</a>" )
        .appendTo( ul );
    };