自动完成显示使用羊驼形式的键和值

我使用羊驼毛窗体来生成一个窗体，一个字段将有一个自动完成。我正在测试http://www.alpacajs.org/docs/fields/text.html中的示例7，以了解它是如何工作的。但是，在我的表单中，自动填充显示为在Alpaca网站上与Cloud CMS的{“value”：“Cloud CMS”}。我也尝试直接指定自动完成值作为数组。以下是我的代码，noteahead.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>

来源

2015-12-05 tw1742

我试着玩弄你的代码，问题是你正在使用的typeahead的版本。我将版本更改为版本0.10.5，它的工作原理是，尝试使用此版本，并告诉我它是否可用。

祝您有美好的一天。

来源

2015-12-06 08:50:27 vert3x

是的，那解决了它 - 谢谢！我使用了bower install typeahead.js来安装，有什么线索让你尝试不同的版本？ – tw1742

这很简单，我只是试图看看他们在图书馆的官方网站使用什么版本。顺便说一下，我现在在工作中使用羊驼近一年，我发现它非常有用和简单易用，但有时涉及到定制......我讨厌这么多，因为我无法找到我的问题的答案，加上其github社区并不是非常活跃。无论如何，我不是要求你尝试其他替代方案或本地代码来生成你的表单，坚持它，它非常有用，并提供很多东西，你可以从中学到太多:) – vert3x

任何想法为这一个http ：//stackoverflow.com/questions/34127172/using-remote-data-for-autocomplete-with-alpaca-forms – tw1742

这里的另一个解决方案，如果你想使用最新版本的事先键入的内容组成：

$("#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提供（link）将自动填充应用于您的字段。您要使用的方法与以前的版本预输入的

我，你必须改变substringMatcher功能是这样的：

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

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

来源

2015-12-07 06:56:15 vert3x

自动完成显示使用羊驼形式的键和值

回答

相关问题