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

Question

I've just implemented a Javascript autocomplete search box inside my website, but the only way I can trigger the links to sub pages is by clicking list items with my mouse. What I want to do, in add to the possibility to select with keyboard that's already implemented, the possibility to hit "return" key on keyboard and go to the selected landing page.

The Js I'm using is:

<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>

The HTML I'm using is:

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

You can see an example here: http://www.lolgame.it/lolgame-counterpicks/

Thanks a lot everyone

See here: http://stackoverflow.com/questions/1648993/trap-the-enter-key-but-not-when-choosing-the-browsers-autocomplete-suggestion and here: http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — random_user_name, May 27 '14 at 14:58
Already saw that page, I just don't know where to put that code inside mine to let it work, this is a code found online and I'm not really into js — , May 27 '14 at 15:04

Jonny · Accepted Answer · 2014-05-27T15:31:24.247

Heere we go. Tested here: 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 );
    };

tested adding your code, after that I added this but still nothing working: .keypress(function(e) { if (e.keyCode == 13) { window.location.href = "http://google.it"; } }) — , May 27 '14 at 15:11
yeah, now it's perfectly working, right inside the select:function(). Thanks a lot! — , May 27 '14 at 15:34

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

1 Answers1