Question

我正在使用羊驼毛形式生成表单，一个字段将具有自动完成功能。我正在测试http://www.alpacajs.org/docs/fields/text.html中的示例7，看看它是如何工作的。但是，在我的表单中，自动填充功能在Alpaca网站上显示为{“value”：“Cloud CMS”}与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

我尝试使用您的代码，问题是您正在使用的typeahead版本。我将版本更改为版本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，并从羊驼代码中删除typeahead配置，然后使用typeahead（link）提供的代码将自动填充应用于您的字段。

我想在以前版本的typeahead中使用该方法，您必须更改substringMatcher函数，如下所示：

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

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

自动填充功能使用羊驼毛形式显示键和值

2 个答案: