使用遠程數據與Alpaca窗體自動完成

我使用Alpaca窗體並從Web服務中爲窗體自動填充字段拉取值。我已經完成了如何使用這些數據作爲使用jQuery的自動完成的值，現在需要在Alpaca表單中使用這個數據源，它使用typeahead.js和Bloodhound.js。我不太確定Alpaca如何與這些其他JS庫進行交互。下面的代碼返回自動完成字段中的值數組，但當然只有匹配的值應該顯示和可選。我不確定是否需要創建一個Bloodhound實例並解析數組匹配，或者在「建議」模板中處理。迄今爲止我都試過但沒有成功。使用遠程數據與Alpaca窗體自動完成

<html> 
    <head> 
     <title>Alpaca-Autocomplete Form</title> 
     <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 

     <!-- jQuery --> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

     <!-- Bootstrap --> 
     <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 

     <!-- Handlebars --> 
     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script> 

     <!-- Alpaca --> 
     <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://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script> 

     <!-- jQuery UI Support --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css"> 

     <!-- 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> --> 
     <script src="typeahead-0.10.5.bundle.min.js" type="text/javascript"></script>  
    </head> 
    <body> 
    <div id="field7"> </div> 
    <script> 
     $("#field7").alpaca({ 
      "schema": { 
       "type": "string" 
      }, 
      "options": { 
       "type": "text", 
       "label": "Input Parameter DataType", 
       "helper": "Select the name of the input parameter data type", 
       "typeahead": { 
        "config": { 
         "autoselect": true, 
         "highlight": true, 
         "hint": true, 
         "minLength": 1, 
         "data": { 
          "q": "request.term" 
         } 
        }, 
        "datasets": { 
         "type": "remote", 
         "name": "data", 
         "displayKey": function(data) { 
          console.log("** displayKey function called **") 
          return data.field_values.buckets; 
         }, 
         "source": "http://smart-api.info/api/suggestion/?field=services.inputParameter.parameterDataType", 
         "displayKey": function(source) { 
          var arr = source.buckets; 
          var results = []; 
          var dataKeys = source.buckets.map(function (x) { 
           results.push({"value": x.key}); //expected data format for type: remote for Alpaca 
           return x.key // key is the name of the key to extract the value for display 
          }); 
          console.log(dataKeys); 
          return dataKeys; 
         }, 
         "templates": function(dataKeys){ 
          var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(request.term), "i"); 
          response($.grep(dataKeys, function(item){ 
           return matcher.test(item); 
          })); 
         } 

        } 
       } 
      } 
     }); 
    </script> 
    </body> 
</html>

來源

2015-12-07 tw1742

首先要正確，不顯示鍵值，你必須使用警犬鍵的排列，所以在初始化羊駝使用警犬進行過濾和處理您的數據是這樣的：

var data = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.whitespace, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
     url: 'http://smart-api.info/api/suggestion/field=services.inputParameter.parameterDataType', 
     filter: function(data) { 
     // Map the remote source JSON array to a JavaScript object array 
      return $.map(data.field_values.buckets, function(bucket) { 
       return { 
        value: bucket.key 
       }; 
      }); 
     } 
     } 
    }); 

    data.initialize();

然後在你的羊駝配置設置displayKey到value和source到data.ttAdapter()

"datasets": { 
    "name": "data", 
    "displayKey": 'value', 
    "source": data.ttAdapter() 
}

有了這個，我d不會得到想要的值，因爲這裏的問題與您使用的數據源有關，我嘗試使用另一個使用％QUERY字符串的數據源，並且它的工作原理是perfectyl。對於這種數據源，我試圖使用local而不是remote，它工作。親自試一試，告訴我它是否有效。

下面是一些模擬數據源的例子：

而且這裏有一個fiddle，我補充說，使用％查詢字符串另一個數據源，嘗試使用本地和遠程在data（請參閱評論），然後嘗試使用alpaca config中的其他數據源movies。

希望這會有所幫助。

來源

2015-12-07 09:20:28 vert3x

是的，這有幫助！有沒有辦法將顯示限制爲只匹配項？ – tw1742

我做了一些編輯基於http://stackoverflow.com/questions/22059933/twitter-typeahead-js-how-to-return-all-matched-elements-within-a-string更改datumTokenizer和遠程預取。我的編輯必須經過同行評審，因此可能尚未顯示。 – tw1742

我嘗試了很多解決方案，我認爲你的數據源響應格式有問題，但我不知道，但是當我改變它的數據源時它很奇怪，它就像一個魅力！ – vert3x

使用遠程數據與Alpaca窗體自動完成

回答

相關問題