AngularJs Bootsrap 预输入自动填充输入框悬停在下拉选项上答案

【问题标题】：AngularJs Bootsrap typeahead autofill input box on hovering over the options on dropdownAngularJs Bootsrap 预输入自动填充输入框悬停在下拉选项上
【发布时间】：2016-07-26 17:18:58
【问题描述】：

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

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

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

所以基本上当你在列表中聚焦一个元素时，它需要被放入 value 字段中。

如何做到这一点？

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

【问题讨论】：

标签： javascript css angularjs angular-ui-bootstrap

【解决方案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

【讨论】：

没有。如果我将鼠标悬停在 Alaska 上，Alaska 一词会突出显示。当阿拉斯加突出显示时，我希望输入框填充阿拉斯加。 Alaska 应在突出显示时填充到文本框中。
但是，过滤器会改变，列表将只有一项。可以改变原来的组件，没那么难，可以在input上创建一个隐藏的div，只在选中item时显示，在这个div上显示item内容。
或者你可以试试其他的 typeahead 组件：ngmodules.org/modules?query=typeahead
是的，这正是我所需要的。但我不能使用其他 typeahead 组件。我必须使用 bootstrap Angular UI typeahead。