我正在尝试植入twitter typeahead.js
https://github.com/corejavascript/typeahead.js
但建议清单并没有减少。。。。
HTML代码:
<div class="container">
<form action="" method="POST">
<div class="typeahead-wrapper">
<input type="text" id="my_search" name="search" autocomplete="off" placeholder="Enter Country Code"/>
<input type="submit">
</div>
</form>
</div>
Javascript代码
$(document).ready(function($) {
var cities_suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("DESIGNATION"),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "villes2.json",
transform: function(data) {
var newData = [];
data.forEach(function(item) {
newData.push(item.DESIGNATION);
});
console.log(newData);
return newData;
}
}
});
cities_suggestions.initialize();
$("#my_search").typeahead(
{
hint: true,
minLength: 1,
highlight: true
},
{
name: "cities",
source: cities_suggestions, // suggestion engine is passed as the source
limit: 10
}
);
});
我的Json文件看起来是这样的:
[
{
"CODE_INSEE": 1344,
"DESIGNATION": "1000 SAINT-DENIS-LES-BOURG"
},
{
"CODE_INSEE": 1053,
"DESIGNATION": "1000 BOURG-EN-BRESSE"
},
{
"CODE_INSEE": 1225,
"DESIGNATION": "1090 LURCY"
},
{
"CODE_INSEE": 1165,
"DESIGNATION": "1090 FRANCHELEINS"
},
{
"CODE_INSEE": 1263,
"DESIGNATION": "1090 MONTMERLE-SUR-SAONE"
},
{
"CODE_INSEE": 1169,
"DESIGNATION": "1090 GENOUILLEUX"
}
]
我仍然有json文件和其他任何东西的十个第一建议控制台.log(NewData(正常
我找到
$(document).ready(function($) {
var cities_suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'villes2.json',
remote: {
url: 'villes2/queries/%QUERY.json',
wildcard: '%QUERY'
},
});
cities_suggestions.initialize();
// init Typeahead
$('#my_search').typeahead(
{
hint: true,
minLength: 1,
highlight: true
},
{
name: 'cities',
display: 'text',
source: cities_suggestions, // suggestion engine is passed as the source
limit: 10,
});
// then fill hidden input for get the value :-)
$('#my_search').bind('typeahead:select', function(ev, suggestion) {
$('#my_search_value').val(suggestion.value)
});
});