2

在我的最后一个问题中，结果证明 typeahead.js 可能是用 ajax 更新的 typeahead 自动完成建议不起作用。在引导标签输入上有一些示例，因此基于我的第一个问题和示例中的一些代码，我得出了以下代码。例如，当我键入时，s我会得到带有下拉菜单的自动建议，Sandra但是当我单击它时，我每次都会收到此错误： Uncaught TypeError: (str || "").replace is not a function

测试.html

<html lang="en">
<head>
    <meta charset="utf-8"/>
  <link rel="stylesheet" href="/static/bootstrap.min.css">
  <link rel="stylesheet" href="/static/bootstrap-theme.min.css">
  <link rel="stylesheet" href="/static/bootstrap-tagsinput.css">

</head>
<body>
    <input type="text" data-role="tagsinput" >

<script src="../static/jquery.min.js"></script>
<script src="../static/bootstrap.min.js"></script>
<script src="../static/typeahead.bundle.js"></script>
<script src="../static/bootstrap-tagsinput.js"></script>


<script>
var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
      url: '/test/?query=*',
      wildcard: '*',
      filter: function(x) {
            return $.map(x, function(item) {
                console.log(item) //["Sandra"]
                return {name: item};
            });
        },
    },
});
citynames.initialize();

$('input').tagsinput({
  itemValue: 'name',
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    source: citynames.ttAdapter()
  }
});
</script>

</body>
</html>

应用程序.py

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

app = Flask(__name__)

@app.route('/', methods=['GET','POST'])
def index():
    return render_template('test.html')

@app.route('/test/', methods=['GET', 'POST'])
def test():
    names = ["John","Jane", "Sandra", "Xerox"]
    query = request.args.get('query')
    return jsonify(options=[name for name in names if query.lower() in name.lower()])

if __name__ == '__main__':
    app.run(debug = True)
4

2 回答 2

2

我通过这样做解决了我的问题：

var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
      url: '/test/?query=*',
      wildcard: '*',
      filter: function(list) {
          var arr = list.options
          var test = []
          for (var i =0; i<arr.length; i++) {
            test.push(arr[i])
          }
          list = test
          return $.map(list, function(item) {
                console.log(item)
                return {name: item};
            });
        },
    },
});
citynames.initialize();

这可能不是最好的方法：D，但它有效

于 2015-06-22T17:20:57.027 回答
0

我通过更改加载顺序解决了类似问题：

angular.module('myapp', ['mgcrea.ngStrap','ui.bootstrap']).controller(...

到：

angular.module('myapp', ['ui.bootstrap','mgcrea.ngStrap']).controller(...

祝你好运！

于 2015-10-02T14:47:29.390 回答