title: How to get selected values from custom drop-down using angularJS
body: <p>actually I have been implemented one custom drop-down using <code>&lt;ul&gt;</code> &amp; <code>&lt;li&gt;</code> elements in my application. And right now I am able to select dropdown values by using mouse click but as part of functionality requirement, user able to select the drop-down values by using enter key also. So for this, I have been binding <code>ng-keypress</code> directive along with <code>ng-mousedown</code> on <code>&lt;li&gt;</code> element but here I able to select the drop-down values using mouse click but not by entering enter key press. Please don't consider this question as duplicate as I asking this question after going through a number of existing threads and not get the perfect answer.And here I posting my whole code base too. Please have a look at it once. I big thanks in advance.</p>
  
  <p>And here selected values just showing at above of search input field as below</p>
  
  <p><a href="https://i.stack.imgur.com/VYwMp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VYwMp.png" alt="enter image description here"></a></p>
  
  <p>Here is my code base - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var appOne = angular.module('appOne', ['ngRoute']);
  
  appOne.directive('myEnter', function () {
      return function (scope, element, attrs) {
          element.bind("keydown keypress", function (event) {
              if (event.which === 13) {
                  console.log("******From myEnter directive******");
                  event.preventDefault();
              }
          });
      };
  });
  
  appOne.controller('controllerOne', function ($scope, $filter) {
  
      $scope.seriesSelected = [];
      var i = 0;
      $scope.startsWith = function (actual, expected) {
          i++;
          var lowerStr = (actual + "").toLowerCase();
          var j = lowerStr.indexOf(expected.toLowerCase()) === 0;
          if (i === 5) {
              $scope.isShowDropDown();
              i = 0;
          }
          return j;
      }
  
      $scope.isShowDropDown = function () {
          var e1 = angular.element(document.querySelector('#versionsId'));
          var k = 0;
          var column1RelArray = $('#versionsId li').map(function () {
              k++;
              if (k === 3) {
                  return false;
              }
              return $(this).hasClass('versionValClass');
          });
  
          if (column1RelArray.length === 0) {
  
              e1.removeClass('open');
          }
          if (column1RelArray.length &gt; 0) {
  
              e1.addClass('open');
          }
      }
  
      $scope.showDropDown = function (event) {
          var e1 = angular.element(document.querySelector('#versionsId'));
          if (!e1.hasClass('open')) {
              e1.addClass('open');
          }
      }
  
      $scope.versionList1 = [
          {
              "id": "217233",
              "value": "16.1",
              "index": "0",
              "type": "Class"
          },
          {
              "id": "217220",
              "value": "12.2",
              "index": "1",
              "type": "Class"
          },
          {
              "id": "217229",
              "value": "13.7",
              "index": "2",
              "type": "Class"
          },
          {
              "id": "212675",
              "value": "8.123",
              "index": "3",
              "type": "Class"
          },
          {
              "id": "212689",
              "value": "16.123",
              "index": "4",
              "type": "Class"
          }
    ];
      $scope.versionList = $scope.versionList1.slice(0);
  
      $scope.selecteSeries = function (indx) {
          $scope.filterSeries.value = '';
          $scope.seriesSelected.push($scope.versionList[indx]);
  
      }
  
  
      $scope.selecteSeriesOnPressEnter = function (indx, event) {
          console.log("keycode is" + event.keyCode);
          if (event.keyCode === 13) {
              $scope.filterSeries.value = '';
              $scope.seriesSelected.push($scope.versionList[indx]);
          }
      }
  
      $('ul#versionsId').on("mouseenter", "li", function () {
          $(this).addClass('selected').siblings().removeClass('selected');
      });
  
  
  
      $('input#searchField').keydown(function (e) {
          var $listItems = $('ul#versionsId li');
          var key = e.keyCode,
              $selected = $listItems.filter('.selected'),
              $current;
  
          if (key != 40 &amp;&amp; key != 38) return;
  
          $listItems.removeClass('selected');
  
          if (key == 40) // Down key
          {
              if (!$selected.length || $selected.is(':last-child')) {
                  $current = $listItems.eq(0);
              } else {
                  $current = $selected.next();
              }
          } else if (key == 38) // Up key
          {
              if (!$selected.length || $selected.is(':first-child')) {
                  $current = $listItems.last();
              } else {
                  $current = $selected.prev();
              }
          }
  
          $current.addClass('selected');
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Example - example-filter-filter-production&lt;/title&gt;
      &lt;script src="//code.angularjs.org/snapshot/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" role="application" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="myApp.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          .versionsId {
              display: none;
              position: absolute;
              width: 28%;
              z-index: 99;
              border: 0 1px 1px 1px solid #ddd;
              border: 1px solid #ddd;
              min-height: 249px;
              max-height: 250px;
              overflow: auto;
              background: #fff;
              margin-top: 0px;
              margin-left: 52px;
          }
          
          #selectedVers {
              list-style-type: none;
          }
          
          input:focus {
              outline: none;
              outline: 0;
              border: 0;
              border-bottom: 2px solid;
          }
          
          .versionsId.open {
              display: block;
          }
          /*.versionsId li:hover {
              background: #aaa;
          }*/
          
          .selected {
              background: #aaa;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="appOne" ng-controller="controllerOne"&gt;
      &lt;div&gt;
          &lt;ul id="selectedVers"&gt;
              &lt;li ng-repeat='s in seriesSelected'&gt; {{ s.value }} &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;label&gt;Search: &lt;input id="searchField" ng-model="filterSeries.value" ng-keypress='showDropDown($event);' style="border:solid 0 0 1px 0;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 2px;border-left-width: 0px;"&gt;&lt;/label&gt;
  
      &lt;div&gt;
          &lt;ul id="versionsId" class="versionsId" style="padding-left: 4px;"&gt;
              &lt;li ng-repeat='v in versionList | filter : filterSeries : startsWith' ng-class="{'selected': $first}" tabindex="{{versionList.indexOf(v)}}" class="versionValClass" ng-if='seriesSelected.indexOf(v) &lt; 0 ' ng-mousedown='selecteSeries(versionList.indexOf(v))' ng-keypress='selecteSeriesOnPressEnter(versionList.indexOf(v), $event);'&gt; {{ v.value }} &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>