自动填充结果不使用Alpaca表单显示

Question

I'm using Alpaca.js to generate forms and am testing out autocomplete Example #7 from http://www.alpacajs.org/docs/fields/text.html . 我正在使用Alpaca.js生成表单，并正在从http://www.alpacajs.org/docs/fields/text.html测试自动完成示例＃7。 In my local form I am not seeing any values in the dropdown. 在我的本地表单中，下拉菜单中没有看到任何值。 Suggestions? 建议？

<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

Using bower install typeahead.js to install typeahead.js installed this under bower_components vs. lib as in the example. 如示例中所示，使用bower install typeahead.js typeahead.js安装typeahead.js将此安装在bower_components vs. lib下。 After updating the references as below, the example is working. 在按如下所示更新参考之后，该示例正在运行。

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

自动填充结果不使用Alpaca表单显示

问题描述

1 个解决方案

解决方案1
1 2015-12-04 22:52:36

自动填充结果不使用Alpaca表单显示

问题描述

1 个解决方案

解决方案1 1 2015-12-04 22:52:36

解决方案1
1 2015-12-04 22:52:36