javascript - AngularJs Bootsrap typeahead 自动填充输入框悬停在下拉选项上

标签 javascript css angularjs angular-ui-bootstrap

我正在使用 AngularJs Bootstrap typeahead 功能。

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

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

enter image description here

所以基本上,当您在列表中聚焦某个元素时,需要将其放入值字段中。

如何实现?

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

最佳答案

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

关于javascript - AngularJs Bootsrap typeahead 自动填充输入框悬停在下拉选项上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36448849/

相关文章:

javascript - 使用 AngularJS ng-class 或替代方案的正确方法

javascript - 我如何在 angularjs 中选择所需的选项和电子邮件验证?

javascript - 传单路由机 - 如何设置线路不可拖动?

javascript - 如何获取数组中的所有内容并将其分配给一个变量,中间有一个空格作为字符串

javascript - 触发哪个事件? (javascript,输入字段历史记录)

java - 如何在 javafx WebView 中指定默认字体与默认 UI 字体相同

html - 缩放图像并将它们 float 成一行

javascript - Gatsby :我怎样才能拥有不区分大小写的动态 URL?

html - 即使我复制并粘贴代码,我的字体和文本大小类也不起作用

javascript - 带有 parse.com 登录的 AngularJS Controller