在列表中显示自动完成建议

时间:2018-07-09 12:03:17

标签: jquery twitter-bootstrap jquery-ui-autocomplete

我想在我的应用程序中看到建议列表。 函数“自动完成”返回正确的数据。 但是,我看不到列表,只能用光标键浏览提案。

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"/>

    <!-- JS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Main script -->
    <script type="text/javascript" src="lib/app.js"></script>

    <!-- Autocomplete -->
    <script>
        $(function() {
            $(".autocomplete").autocomplete({
                source: "script/search.php"
            });
        });
    </script>

我认为我已经选择了错误的控制形式?!

<div class="modal fade" id="add_new_task_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"> </div>
                <div class="modal-body">                   
                    <div class="form-group">
                        <label for="item">Items</label>
                        <input ng-model="task.item" type="text" id="item" class="form-control autocomplete"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" ng-click="addTask()">Save</button>
                </div>
            </div>
        </div>
    </div>   

编辑:我认为是由于模态类。现在,该列表显示在对话框的后面。

List

0 个答案:

没有答案