Question

我正在使用AngularJs Bootstrap预先输入功能。

通常当我们输入匹配的内容时，下拉列表会打开。

我想要的是，通过使用键盘键上下将鼠标悬停在选项上，具有焦点的下拉选项应自动填充文本框。

所以基本上当你将一个元素集中在列表中时，需要将它放入值字段中。

如何实现这一目标？

这是我的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)' >

Answer 1

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

你需要这个吗？@ASR

将鼠标悬停在下拉选项上的AngularJs Bootsrap预先输入自动填充输入框

1 个答案: