2015-06-21 45 views
2

在我的最後一個問題中,原來typeahead.js可能更新了typeahead autocomplete suggestion with ajax doesn't work。在bootstrap tags input有一些例子,所以基於我的第一個問題和例子的一些代碼,我用下面的代碼出來了。 當我鍵入例如s我得到下拉Sandra自我暗示,但是當我點擊它,我每一次得到這個錯誤: Uncaught TypeError: (str || "").replace is not a functionbootstrap標籤輸入typeahead throws(str ||「」).replace不是函數

的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) 

回答

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但它的工作

0

我解決過類似通過更改加載順序:

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

到:

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

祝你好運!