使用Ajax提前輸入自動完成建議不起作用

Question

假設我輸入例如“ j”，我應該看到自動完成，例如約翰，在輸入標簽下方有更多建議，但我沒有。 在我的控制台中，我得到["John", "Jane"] ，沒有錯誤。

test.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<div id="aa">
  <input class="typeahead" type="text" placeholder="names">
</div>

<script src="../static/jquery-1.11.3.min.js"></script>
<script src="../static/typeahead.bundle.js"></script>
<script>
 $('#aa .typeahead').typeahead(null, {
        source: function (query, process) {
        $.ajax({
          url: '/test/',
          type: 'GET',
          contentType: "application/json; charset=utf-8",
          data: {'query': query},
          success: function(data) {
            console.log(data.options);
            process(data.options);
          }
        });
      }
   });
 </script>
 </body>
 </html>

app.py

from flask import Flask, render_template, url_for, jsonify, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('test.html')

@app.route('/test/')
def test():
    print request.args.get('query')
    return jsonify(options=["John","Jane"])
if __name__ == '__main__':
    app.run(debug = True)

Answer 1

我認為Typeahead已更新，現在您的代碼將無法使用。

嘗試這個：

<html lang="en">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<div id="aa">
  <input class="typeahead" type="text" placeholder="names">
</div>

<script src="../static/jquery-1.11.3.min.js"></script>
<script src="../static/typeahead.bundle.js"></script>
<script>
  var engine = new Bloodhound({
    remote: {
      url: '/test/?query=*',
      wildcard: '*',
      transform: function (response) {
        return response.options;
      }
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.whitespace,
  });

$('#aa .typeahead').typeahead(null, {
  name: 'my-dataset',
  source: engine
});
</script>
</body>
</html>

有關更多信息，請參見Bloodhound上的Typeahead.js 文檔。

Answer 2

實際上，您的代碼可以正常工作...如果您知道更改了什么。

發生了什么變化？ 源函數的簽名！

現在有2個功能，而不是1個功能。第一個用於同步操作。 第二個用於異步操作。 更改

source: function (query, process) {

至

source: function (query, dummy, process) {

並且原始帖子中的代碼應該可以正常工作...

...除外，異步處理器中存在錯誤。 看到TypeAhead.js和Bloodhound顯示了奇數個結果

使用Ajax提前輸入自動完成建議不起作用

問題描述

2 個解決方案

解決方案1
1 已采納 2015-06-20 00:06:00

解決方案2
0 2015-10-06 07:56:43

使用Ajax提前輸入自動完成建議不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2015-06-20 00:06:00

解決方案2 0 2015-10-06 07:56:43

解決方案1
1 已采納 2015-06-20 00:06:00

解決方案2
0 2015-10-06 07:56:43