自動完成顯示使用羊駝形式的鍵和值

我使用羊駝毛窗體來生成一個窗體，一個字段將有一個自動完成。我正在測試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

自動完成顯示使用羊駝形式的鍵和值

回答

相關問題