Typeahead.js和图像缩略图
Typeahead.js and Image Thumbnails
在本地主机XAMPP上使用Twitter Typeahead.js (https://twitter.github.io/typeahead.js/examples/),除了一件事之外,所有工作都很好。我不能让图像缩略图出现在搜索栏中,一旦我选择了建议的项目。
到目前为止,我有一个数据库与firstname
, lastname
, release_year
和image
(图像列包含链接到我的图像文件夹与缩略图/images/thumbnail1.jpg
../thumbnail2.jpg
等等)。
当我在搜索栏中输入firstname
, lastname
, release_year
和thumbnail
图像时确实出现了,但是当我点击建议项目时,只有名字出现在搜索栏中。
我需要在代码中更改什么才能使图像出现在名称的左侧?
我的代码如下;
$(document).ready(function() {
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
// url points to a json file that contains an array of country names, see
// https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
url: 'countries.json',
ttl: 0,
// the json file contains an array of strings, but the Bloodhound
// suggestion engine expects JavaScript objects so this converts all of
// those strings
filter: function(list) {
return $.map(list, function(country) {
return {
name: country.first_name,
lastname: country.last_name,
image: country.image,
release_year: country.release_year
};
});
}
}
});
// kicks off the loading/processing of `local` and `prefetch`
countries.initialize();
// passing in `null` for the `options` arguments will result in the default
// options being used
$('.demo .typeahead').typeahead(null, {
displayKey: 'name', // displays the name (title) of book/dvd in the search bar
engine: Handlebars,
templates: {
header: '<h1>Name</h1>',
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join(''n'),
suggestion: Handlebars.compile('<img class="typeahead_photo" src="{{image}}"/> <p><strong>{{name}}</strong></p> <p><em>{{lastname}}</em> </p> <p><em>{{release_year}}</em></p>') // layout of the searchbar results
},
engine: Handlebars,
// `ttAdapter` wraps the suggestion engine in an adapter that
// is compatible with the typeahead jQuery plugin
source: countries.ttAdapter()
});
});
这只是在开发中,所以原谅上面的代码和命名-我必须整理它!
不幸的是,我不能创建一个jsfiddle,因为我正在从本地json文件检索数据。
我已经设法使这个工作。
我必须在sql数据库中创建一个字段来保存图像,然后在根目录中创建一个文件夹。上传所有的图像,并在我的SQL表字段中引用这些图像。
操作完成后,图像按预期显示。
希望能有所帮助。
相关文章:
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 用较大的图像交换缩略图
- 不应选择缩略图优先图像
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 缩略图图像滑块
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 图像库缩略图滑块
- 缩略图库的XML数据图像绑定
- Jquery循环页面缩略图图像-保留主图像链接标签
- 从缩略图图像显示屏幕范围的版本
- 在网格中显示缩略图图像,并扩展预览
- 如何在缩略图图像的翻转上显示弹出窗口?Javascript、CSS
- 如何将交替类添加到缩略图图像的动态提要
- 当点击不同的2个缩略图图像时,页面跳转
- Jquery/Javascript缩略图图像问题
- 如何使图片库将显示图像更改为缩略图图像?
- Woocommerce缩略图图像交换
- Photowipe缩略图图像大小问题 - 尝试调整缩略图大小以获得统一的外观
- 如何将缩略图图像附加到 DIV 时以特定模式定位它们
- 在chrome浏览器中,它如何显示全尺寸的图像url,当用户在我的网站上拖动缩略图图像