使用远程数据自动完成 Alpaca 表单

Question

我正在使用 Alpaca 表单并从 Web 服务中提取表单自动完成字段的值。我已经研究了如何使用这些数据作为使用 jQuery 的自动完成的值，现在需要在使用 typeahead.js 和 Bloodhound.js 的 Alpaca 表单中使用这个数据源。我不太确定 Alpaca 如何与这些其他 JS 库交互。下面的代码在自动完成字段中返回一个值数组，但当然只有匹配的值应该显示和选择。我不确定是否需要创建一个 Bloodhound 实例并在那里解析数组匹配项，或者在“建议”模板中处理它。到目前为止，我都尝试过，但都没有成功。

<html>
    <head>
        <title>Alpaca-Autocomplete Form</title>
        <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

        <!-- jQuery -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

        <!-- Bootstrap -->
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

        <!-- Handlebars --> 
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>

        <!-- Alpaca -->
        <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://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script>

        <!-- jQuery UI Support --> 
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">

        <!-- typeahead.js https://github.com/twitter/typeahead.js -->
        <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> -->
        <script src="typeahead-0.10.5.bundle.min.js" type="text/javascript"></script>    
    </head>
    <body>
    <div id="field7"> </div>
    <script>
        $("#field7").alpaca({
            "schema": {
                "type": "string"
            },
            "options": {
                "type": "text",
                "label": "Input Parameter DataType",
                "helper": "Select the name of the input parameter data type",
                "typeahead": {
                    "config": {
                        "autoselect": true,
                        "highlight": true,
                        "hint": true,
                        "minLength": 1,
                        "data": {
                            "q": "request.term"
                        }
                    },
                    "datasets": {
                        "type": "remote",
                        "name": "data",
                        "displayKey": function(data) {
                            console.log("** displayKey function called **")
                            return data.field_values.buckets;
                        },
                        "source": "http://smart-api.info/api/suggestion/?field=services.inputParameter.parameterDataType",
                        "displayKey": function(source) {
                            var arr = source.buckets; 
                            var results = [];
                            var dataKeys = source.buckets.map(function (x) {
                                results.push({"value": x.key}); //expected data format for type: remote for Alpaca
                                return x.key // key is the name of the key to extract the value for display 
                            });
                            console.log(dataKeys);
                            return dataKeys;   
                        },
                        "templates": function(dataKeys){
                            var matcher = new RegExp( "\\b" + $.ui.autocomplete.escapeRegex( request.term ), "i" ); 
                            response( $.grep( dataKeys, function( item ){
                                return matcher.test( item );
                            }) );
                        }

                    }
                }
            }
        });
    </script>
    </body>
</html>

Answer 1

首先要正确显示键值而不是键数组，您必须使用 Bloodhound，因此在初始化 alpaca 之前，请使用 Bloodhound 过滤和处理您的数据，如下所示：

    var data = new Bloodhound({
       datumTokenizer: Bloodhound.tokenizers.whitespace,
       queryTokenizer: Bloodhound.tokenizers.whitespace,
       remote: {
         url: 'http://smart-api.info/api/suggestion/field=services.inputParameter.parameterDataType',
         filter: function(data) {
         // Map the remote source JSON array to a JavaScript object array
             return $.map(data.field_values.buckets, function(bucket) {
                return {
                  value: bucket.key
                };
             });
         }
       }
    });

    data.initialize();

然后在你的 alpaca 配置中设置 displayKey 到 value 和 source 到 data.ttAdapter()

"datasets": {
    "name": "data",
    "displayKey": 'value',
    "source": data.ttAdapter()
}

有了这个我没有得到想要的值，因为这里的问题在于您正在使用的数据源，我尝试使用另一个使用 %QUERY 字符串的数据源，它完美地工作。对于这种数据源，我尝试使用local而不是remote，并且成功了。自己尝试一下，告诉我它是否有效。

以下是一些模拟数据源示例：

• (http://www.alpacajs.org/docs/endpoints/typeahead-sample.php?q=%QUERY)
• (http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d)

这是一个fiddle，我添加了另一个使用 %QUERY 字符串的数据源，尝试在 data 中使用本地和远程（参见 cmets），然后尝试在 alpaca 配置中使用其他数据源 movies .

希望这会有所帮助。