I use jQuery-ui autoplete in my rails application. When I type some input I want it to automatically select the first item in the autoplete box. How should I implement this?

jQuery(function() {
    return $('#transaction_receiver_name').autoplete({
        source: $('#transaction_receiver_name').data('autoplete-source')
    });
});

My css

.ui-helper-hidden-accessible {
  display: none;
}

ul.ui-autoplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  li {
    background-color: #FFF;
    color: black;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 0;
    a {
      color: #000;
      display: block;
      padding: 3px;
    }
    a.ui-state-hover, a.ui-state-active {
      background-color: #FFFCB2;
    }
  }
}

Input field

I use jQuery-ui autoplete in my rails application. When I type some input I want it to automatically select the first item in the autoplete box. How should I implement this?

jQuery(function() {
    return $('#transaction_receiver_name').autoplete({
        source: $('#transaction_receiver_name').data('autoplete-source')
    });
});

My css

.ui-helper-hidden-accessible {
  display: none;
}

ul.ui-autoplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  li {
    background-color: #FFF;
    color: black;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 0;
    a {
      color: #000;
      display: block;
      padding: 3px;
    }
    a.ui-state-hover, a.ui-state-active {
      background-color: #FFFCB2;
    }
  }
}

Input field

• javascript
• jquery
• ruby-on-rails
• jquery-ui
• autoplete

Share Improve this question Follow asked Mar 15, 2017 at 15:45 KSHMRKSHMR 5522 silver badges99 bronze badges 1

• Why not makeuse of the open callback to acplish this. – Twisty Commented Mar 15, 2017 at 15:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You just need to add autoFocus: true and it will automatically select the first element that shows in the list.

jQuery(function() {
    return $('#transaction_receiver_name').autoplete({
        source: $('#transaction_receiver_name').data('autoplete-source'),
        autoFocus: true
        }

    });
});

Here is an example:

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autoplete({
    source: availableTags,
    autoFocus: true,
    focus: function(event, ui) {
      event.preventDefault();
      //Here you can add anycode you want to be executed when an item of the box is selected
    },
    select: function(event, ui) {
      event.preventDefault();
     //Code here will be executed when an item is clicked on 
    }
  });
});

/* this will change the style of the selected element of the box*/

.ui-autoplete .ui-menu-item .ui-state-active {
  color: blue;
  background: red;
}

<link href="https://code.jquery./ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

<input id="tags">

When the menu opens, you could collect the first list item and use that as the value. For example:

jQuery(function() {
  return $('#transaction_receiver_name').autoplete({
    source: $('#transaction_receiver_name').data('autoplete-source'),
    open: function(e, ui){
      var first = $(".ui-menu-item:eq(0) div").html();
      $(this).val(first);
      return false;
    }
  });
});

This is untested.

Another method is to trigger click on the first element.

jQuery(function() {
  return $('#transaction_receiver_name').autoplete({
    source: $('#transaction_receiver_name').data('autoplete-source'),
    open: function(e, ui){
      $(".ui-menu-item:eq(0)").trigger("click");
      return false;
    }
  });
});