在bootstrap 2中,我使用以下代码发布了一个json对象,
$('#typeahead').typeahead({
source: function (query, process) {
var URL = 'http://localhost:8080/autocomplete/search/';
var query = {"t:jsonStringField": {
"name": "model",
"value": "fusion"
},
"t:jsonStringFilter": [
{"name": "year","value": "2009"},
{"name": "make","value": "ford"}
]
};
return $.getJSON(URL,
{ query: JSON.stringify(query)},
function (data) {
return process(data);
});
}
});
现在在twitter tyeahead 0.9.3中他们已经废除了源代码概念并转向了远程概念,但不幸的是我不知道如何使用它。
$(".typeahead").typeahead({
remote : {
url: 'http://localhost:8080/autocomplete/search/',
replace: function(uri, query) {
var query = {"t:jsonStringField": {
"name": "model",
"value": "fusion"
},
"t:jsonStringFilter": [
{"name": "year","value": "2009"},
{"name": "make","value": "ford"}
]
};
return uri + JSON.stringify(query);
},
filter: function(response) {
return response.matches;
}
return process(resultList);
}
}
不幸的是它不起作用,我如何发布JSON对象而不是将其附加到字符串?谢谢。
答案 0 :(得分:1)
在原始代码中,您使用$ .getJSON。这会将请求(并期望json作为结果)发送到:http://localhost:8080/autocomplete/search/?query=%7B%22t%3AjsonStringField%22%3A%7B%22name%22%3A%22model%22%2C%22value%22%3A%22fusion%22%7D%2C%22t%3AjsonStringFilter%22%3A%5B%7B%22name%22%3A%22year%22%2C%22value%22%3A%222009%22%7D%2C%7B%22name%22%3A%22make%22%2C%22value%22%3A%22ford%22%7D%5D%7D
要对Twitter的Typeahead调用执行相同的操作,您的远程数据的替换功能应返回有效的URL。在您的函数中,网址的?query=
部分缺失。
您必须设置:url:'http://localhost:8080/autocomplete/search/?query=',
你也可能需要对你的json输入进行urlencode。
注意:您不需要行return process(resultList);
您必须使用过滤器函数将您的json结果转换为有效数据:
组成数据集的各个单元称为基准。该 规范形式的数据是具有value属性和a的对象 令牌财产。
您可以使用模板设置下拉结果的样式,请参阅:http://twitter.github.io/typeahead.js/examples/
默认情况下,typeahead.js创建的下拉菜单将会显示 丑陋,你会想要它的风格,以确保它适合主题 你的网页。
您需要https://github.com/jharding/typeahead.js-bootstrap.css中的其他CSS来设置Bootstrap的默认下拉列表。