Question

我正在使用Alpaca.js生成表单，并正在测试http://www.alpacajs.org/docs/fields/text.html中的自动完成示例＃7。在我的本地表格中，我没有在下拉列表中看到任何值。建议？

<html>
    <head>
        <title>Alpaca-Autocomplete Form</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
        <link type="text/css" href="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.css" rel="stylesheet" />
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
        <script type="text/javascript" src="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script>
        <!-- typeahead.js https://github.com/twitter/typeahead.js -->
        <script src="/lib/typeahead.js/dist/bloodhound.min.js" type="text/javascript"></script>
        <script src="/lib/typeahead.js/dist/typeahead.bundle.min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="field7"> </div>
    <script type="text/javascript" id="field7">
        var companies = ["Cloud CMS", "Amazon", "HubSpot"];
       $("#field7").alpaca({
            "schema": {
                "type": "string"
            },
            "options": {
                "type": "text",
                "label": "Company Name",
                "helper": "Select the name of a cloud computing company",
                "typeahead": {
                    "config": {
                        "autoselect": true,
                        "highlight": true,
                        "hint": true,
                        "minLength": 1
                    },
                    "datasets": {
                        "type": "local",
                        "source": function(query) {
                            console.log("** Searching for autocomplete responses **")
                            var companies = ["Cloud CMS", "Amazon", "HubSpot"];
                            var results = [];
                            for (var i = 0; i < companies.length; i++) {
                                var add = true;
                                if (query) {
                                    add = (companies[i].indexOf(query) === 0);
                                }
                                if (add) {
                                    results.push({
                                        "value": companies[i]
                                    });
                                }
                            }
                            return results;
                        }
                    }
                }
            }
        });
    </script>
    </body>
</html>

Answer 1

使用bower install typeahead.js安装typeahead.js，在bower_components vs. lib下安装，如示例所示。更新下面的引用后，示例正在运行。

<script src="bower_components/typeahead.js/dist/bloodhound.min.js" type="text/javascript"></script>
<script src="bower_components/typeahead.js/dist/typeahead.bundle.min.js" type="text/javascript"></script>

使用羊驼毛形式无法显示自动填充结果

1 个答案: