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

Autocomplete displays key and value using Alpaca forms

本文关键字：显示 表单 密钥 Alpaca      更新时间：2023-09-26

我使用Alpaca表单生成表单，其中一个字段将自动完成。我正在测试来自http://www.alpacajs.org/docs/fields/text.html看看这是怎么回事。然而，在我的表单中，自动完成显示为{"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>

我试着摆弄你的代码，问题是你使用的typeahead版本。我把这个版本改成了0.10.5版本，它起作用了，试着使用这个版本，告诉我它是否起作用。

祝你今天过得愉快。

如果您想使用最新版本的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（链接）提供的代码将自动补全应用于字段。

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

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

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

相关文章：