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

How to trigger javascript generated HTML list items with return key stroke

本文关键字：HTML 列表 javascript 返回 何使用      更新时间：2023-09-26

我刚刚在我的网站内实现了一个Javascript自动完成搜索框，但是我可以触发子页面链接的唯一方法是用鼠标单击列表项。我想做的是，除了使用已经实现的键盘进行选择的可能性之外，还可以按键盘上的"返回"键，然后返回所选的着陆页面。

我使用的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/

谢谢大家

开始。这里测试: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 );
    };
相关文章：