使用 Alpaca 表单自动完成显示键和值

Question

我正在使用 Alpaca 表单来生成表单，其中一个字段将具有自动完成功能。我正在从http://www.alpacajs.org/docs/fields/text.html 测试示例 7，看看它是如何工作的。但是，在我的表单中，自动完成显示为 {"value":"Cloud CMS"} 与 Alpaca 网站上的 Cloud CMS。我还尝试直接将自动完成值指定为数组。下面是我的代码，注意 typeahead.js 是本地安装的。

<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" />
        <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <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://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="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>    
    </head>
    <body>
    <div id="field7"> </div>
    <script>
        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": companies
                        // "source": function(query) {
                        //     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

我尝试使用您的代码，问题是您使用的预输入版本。我将版本更改为版本0.10.5 并且它有效，尝试使用此版本并告诉我它是否有效。

祝你有美好的一天。

Answer 2

如果您想使用最新版本的 Typeahead，这里还有另一个解决方案：

$("#field7").alpaca({
   "schema": {
      "type": "string"
   },
   "options": {
      "type": "text",
      "id": "companyField",
      "label": "Company Name",
      "helper": "Select the name of a cloud computing company"
  }
});

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
     var matches, substringRegex;

     // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

   cb(matches);
  };
};

var companies = ["Cloud CMS", "Amazon", "HubSpot"];

$('#companyField').typeahead({
  hint: true,
  highlight: true,
  minLength: 2
}, {
 name: 'companies',
 source: substringMatcher(companies)
});

您必须首先向您的字段添加名称或 ID，并从您的 alpaca 代码中删除 typeahead 配置，然后使用 typeahead (link) 提供的代码对您的字段应用自动补全。

如果你想使用之前版本的预输入方法，你必须像这样更改 substringMatcher 函数：

// ...
$.each(strs, function(i, str) {
     if (substrRegex.test(str)) {
         matches.push({
            value: str
         });
     }
});
// ...

这是一个jsfiddle。 使用这种技术我仍然有一些样式问题，但我认为有一个解决方法。