Использование удаленных данных для автозаполнения с формами Альпака

Я использую формы Альпака и извлекаю значения для поля автозаполнения формы из веб-службы. Я работал над тем, как использовать эти данные в качестве значений для автозаполнения с помощью jQuery, и теперь мне нужно использовать этот источник данных в формах Alpaca, которые используют typeahead.js и Bloodhound.js. Я не совсем уверен, как Альпака взаимодействует с этими другими 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>
Источник

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, и он работал отлично. Для такого рода источника данных я пытался использовать localвместо remote и это сработало. Попробуйте сами и скажите мне, если это работает.

Вот несколько примеров ложных источников данных:

И вот скрипка, я добавил еще один источник данных, который использует строку%QUERY, попробуйте использовать локальный и удаленный в data (см. комментарии) и попробуйте затем использовать другой источник данных movies в конфиге альпаки.

Надеюсь это поможет.

Источник
Другие вопросы по тегам