使用 angular、css、html 手动复制 bootstrap typeahead-show-hint答案

【问题标题】：manually replicate bootstraps typehead-show-hint with angular, css, html使用 angular、css、html 手动复制 bootstrap typeahead-show-hint
【发布时间】：2017-01-12 04:33:27
【问题描述】：

是否可以仅使用 angular、html 和 css 来复制 bootstraps 字体提示功能。我想在搜索框中动态显示搜索结果的第一项！

<body>
    <div ng-app="demoApp" ng-controller='demoCtrl'>
        <br>
        <input type="text" ng-model="search_term" placeholder="search...">
        <br>
        <div ng-repeat="(index, item) in items | filter:search_term" ng-class="{'is-first' : index == 0}">{{item}}</div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        var app = angular.module('demoApp', []);
        app.controller('demoCtrl', ['$scope', function($scope) {

            $scope.items = [
                'Apple',
                'Apricot',
                'Avocado',
                'Banana',
                'Bilberry',
                'Blackberry',
                'Blackcurrant',
                'Blueberry',
                'Boysenberry',
                'Cantaloupe',
                'Currant',
                'Cherry',
                'Cherimoya',
                'Cloudberry',
                'Coconut',
                'Cranberry',
                'Damson',
                'Date',
                'Dragonfruit'
            ];
        }]);
    </script>
    <style>
        /* put any CSS you need here */
        .is-first {
            color:red;
        }

    </style>
</body>

任何帮助表示赞赏！

【问题讨论】：

是你要找的吗：angular-ui.github.io/bootstrap/#/typeahead ?
是的，但我想在不使用引导程序的情况下执行此操作

标签： html css angularjs twitter-bootstrap search

【解决方案1】：

最后我的解决方案，我使用 ng-change 隐藏/显示一个重复的输入框，它返回了搜索过滤器上的第一项：

<body>
<div ng-app="demoApp" ng-controller='demoCtrl'>
    <br>
    <input class="main" type="text" ng-model="search_term" placeholder="search..." ng-change="showSuggest()">
    <br>

    <div ng-show="suggestion" class="autocomplete" ng-repeat="(index, item) in items | filter:search_term | limitTo:1">
        <input  disabled type="text" placeholder=" {{ item }}">
    </div>
    <div ng-repeat="(index, item) in items | filter:search_term" ng-class="{'is-first' : index == 0}">{{item}}</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('demoApp', []);
app.controller('demoCtrl', ['$scope', function($scope) {
    $scope.suggestion = false;
    $scope.items = [
        'Apple',
        'Apricot',
        'Avocado',
        'Banana',
        'Bilberry',
        'Blackberry',
        'Blackcurrant',
        'Blueberry',
        'Boysenberry',
        'Cantaloupe',
        'Currant',
        'Cherry',
        'Cherimoya',
        'Cloudberry',
        'Coconut',
        'Cranberry',
        'Damson',
        'Date',
        'Dragonfruit'
    ];

    $scope.showSuggest = function(){
     if ($scope.search_term.length < 1)
            {$scope.suggestion = false}
     else {$scope.suggestion = true}
 };

}]);
</script>
<style>
/* put any CSS you need here */
.is-first {
    color:red;
}

.main{
    position: absolute;
    top: 10;
    left: 10;
    z-index: 11;
    background: transparent;

}
.autocomplete{
    position: absolute;
    top: 10;
    left: 10;
    background: transparent;
    z-index: 10;
}

</style>

【讨论】：