AngularJs Bootsrap先行入力オートフィル入力ボックスがドロップダウンのオプションにカーソルを合わせたとき

私はAngularJs Bootstrap先頭機能を使用しています。AngularJs Bootsrap先行入力オートフィル入力ボックスがドロップダウンのオプションにカーソルを合わせたとき

通常、一致するものを入力すると、ドロップダウンが開きます。

私が欲しいのは、上下キーボードキーを使って、オプションの上にマウスで、フォーカスを持っているドロップダウンオプションは、テキストボックスを自動入力する必要があります。

あなたは、リスト内の要素を集中するときしたがって、基本的には、値フィールドに置かれる必要があります。

これはどのように達成できますか？

これは私の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)' >

出典

2016-04-06 ASR

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

出典

2016-04-06 11:59:01 Batman

番号を、これを必要なのです。アラスカがハイライト表示されているときに、入力ボックスにアラスカが入力されるようにします。アラスカは強調表示されているときにテキストボックスに入力されるはずです。 – ASR

しかし、フィルターが変更され、リストには1つの項目しかありません。元のコンポーネントを変更することは難しくありません。入力に隠れたdivを作成し、アイテムが選択されている場合にのみ表示し、このdivにアイテムの内容を表示することができます。 –

または他の先読みコンポーネントを試すことができます：http://ngmodules.org/modules?query=typeahead –

AngularJs Bootsrap先行入力オートフィル入力ボックスがドロップダウンのオプションにカーソルを合わせたとき

答えて

関連する問題