CODEWITHSUNDEEP
javascriptcssangularjsangular-ui-bootstrap
ASR
ASR

Reputation: 471

AngularJs Bootsrap typeahead autofill input box on hovering over the options on dropdown

I am using AngularJs Bootstrap typeahead feature.

Usually when we type something that matches, the dropdown opens up. Check this image

What I want is, on hovering over the options by using the keyboard keys up and down, the dropdown option which has the focus should autofill the textbox.

enter image description here

So basically when you focus an element in your list, it needs to be put into the value field.

How can this be achieved?

This is my html

 <input type="text" id="myId" 
  class="form-control" ng-model="selected" 
  placeHolder="Please type here" onkeyup="scrollSubmit(event,this.value)"
  typeahead="item for item in getInput($viewValue) | limitTo:5" 
  typeahead-focus-first="false" typeahead-on-select='onSelect($item)' >

Upvotes: 0

Views: 1457

Answers (1)

Batman
Batman

Reputation: 480

// https://angular-ui.github.io/

// setup app and pass ui.bootstrap as dep
var myApp = angular.module("stack", ["ui.bootstrap"]);

// define factory for data source
myApp.factory("States", function() {
    var states = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Dakota", "North Carolina", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"];

    return states;

});

// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) {

    $scope.selected = undefined;

    $scope.states = States;

});
<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script>
</head>

<body>
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
        <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
        <div class="form-group">
            <label for="states">Search for US States</label>
            <input name="states" id="states" type="text" placeholder="enter a state" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
        </div>
        <button class="btn btn-success" type="submit">Submit</button>
    </div>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

do you need this?@ASR

Upvotes: 1

Related Questions