我是 JavaScript 和 Twitter 的新手。
我正在运行此 JS 代码，它使用法国地址/GPS 坐标的 API，并为 Twitter Typeahead 调用 CDN。 我的问题是 boostrap css 似乎被忽略了，链接到 typeahead 的输入框没有按照指示 (col-sm-8) 进行格式化。 我遇到的另一个问题是前面类型的行似乎在透明背景上（这使得它在完整的应用程序上不可读）。
我分享这段代码，它独立运行并且非常感谢输入。
<!DOCTYPE html>
<html>
<head>
<title>Typeahead Autocomplete Example</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Twitter Typeahead -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<!-- Bloodhound -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.min.js"></script>
</head>
<body>
<div class="container">
<hr>
<h4>Find by address</h4>
<div class="row">
<div class="col-sm-8">
<input id="postalAddressId" class="form-control" type="text" placeholder="Enter address">
</div>
<div class="col-sm-1">
<label for="postalLongitudeId">Longitude</label>
</div>
<div class="col-sm-1">
<input id="postalLongitudeId" class="form-control" type="text" readonly>
</div>
<div class="col-sm-1">
<label for="postalLatitudeId">Latitude</label>
</div>
<div class="col-sm-1">
<input id="postalLatitudeId" class="form-control" type="text" readonly>
</div>
</div>
</div>
<script>
let lon_lat={lon:null, lat:null};
// Define the bloodhound engine
var engine = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('display_name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://api-adresse.data.gouv.fr/search/?q=%QUERY&autocomplete=0&limit=15',
wildcard: '%QUERY',
filter: function(response) {
const features = response.features;
let results = [];
for (let i = 0; i < features.length; i++) {
const address = {
display_name: features[i].properties.label,
lat: features[i].geometry.coordinates[1],
lon: features[i].geometry.coordinates[0]
}
results.push(address);
}
console.log(results);
return results;
}
}
});
// Initialize the typeahead
$('#postalAddressId').typeahead({
hint: true,
highlight: true,
minLength: 7,
limit: 10
},
{
name: 'engine',
display: 'display_name',
source: engine
})
.on('typeahead:select', function (event, selected) {
console.log("selected event");
if (lon_lat['lon']===selected.lon && lon_lat['lat']===selected.lat){
}else{
lon_lat['lon']=selected.lon;
lon_lat['lat']=selected.lat;
console.log('lat: ' + selected.lat);
console.log('lon: ' + selected.lon);
}
})
.on('keyup', function(event) {
if (event.keyCode === 13||event.keyCode === 9) {
console.log("keyup"+String(event.keyCode));
// get the first suggestion from the typeahead dropdown
const firstSuggestion = $(this).siblings('.tt-menu').find('.tt-suggestion:first-child');
if (firstSuggestion.length > 0) {
// simulate a click on the first suggestion to select it
firstSuggestion.trigger('click');
}
}
});
</script>
</body>
</html>