2

私の最後の質問では、typeahead.js はおそらくajax による typeahead オートコンプリートの提案が機能しないと更新されたことが判明しました。ブートストラップタグの入力にはいくつかの例があるため、最初の質問のコードと例に基づいて、以下のコードを作成しました。たとえば、入力するsとドロップダウンで自動提案Sandraが表示されますが、クリックすると毎回このエラーが発生します。 Uncaught TypeError: (str || "").replace is not a function

test.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>

app.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

0

読み込み順序を次から変更することで同様に解決しました：

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

に：

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

幸運を！

于 2015-10-02T14:47:29.390 に答える