Question

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

<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的键数组，因此在初始化羊驼之前，请使用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();

然后在你的羊驼配置集displayKey到value和source到data.ttAdapter()

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

有了这个，我没有得到想要的值，因为这里的问题是你正在使用的数据源，我试图使用另一个使用％QUERY字符串的数据源，它使用了perfectyl。对于这种数据源，我尝试使用local代替remote并且它有效。亲自试试并告诉我它是否有效。

这里有一些模拟数据源示例：

在这里＆＃39; sa fiddle，我添加了另一个使用％QUERY字符串的数据源，尝试在data中使用本地和远程（请参阅注释）然后尝试使用其他alpaca config中的数据源movies。

希望这有帮助。

使用远程数据与羊驼形式自动完成

1 个答案: