入力値を入力するために getbootstrap typeahead を使用しています。ユーザーがこのリストから何かを選択する必要があるように、すべてをセットアップしました。
<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!"
uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
uib-tooltip="Pick a bird or check the box if unsure!"
tooltip-placement="top-right"
tooltip-trigger="mouseenter"
tooltip-enable="!birdname">
</div>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
</div>
ご覧のとおり、ユーザーはこのリストから何かを選択する必要があります。そうしないと、検証で許可されませんが、1 つの問題があります。ユーザーが入力を開始し、存在する鳥の名前を入力している場合 (入力時に鳥が表示されるリスト) 、しかし、マウスで入力からクリックします。完全な名前が選択されていなくても、typeahead はこれを「正しい」ものとして受け入れます。
これに対する修正はありますか?
私の言いたいことが理解できなかった場合は、次の図で説明できることを願っています。
これに対する解決策はありますか?たとえば、クリックするとリストの最初のオプションが選択されますか?