【发布时间】:2016-05-11 20:29:08
【问题描述】:
我为在线商店构建的基于 jQuery/JSON 的实时搜索一直被困在这个问题上。使用Tipue Drop 开源我能够在使用他们的测试 JSON 时获得结果,但似乎无法让它读取我的结果。我有一个 JSON 文件 here 并正在使用下面的 javascript 尝试使用 Tipue Drop 读取名称和描述字段。任何关于我如何解决这个问题的建议都非常感谢!
/*
Tipue drop 5.0.2
Copyright (c) 2015 Tipue
Tipue drop is released under the MIT License
http://www.tipue.com/drop
*/
(function($) {
$.fn.tipuedrop = function(options) {
var set = $.extend( {
'show' : 3,
'speed' : 300,
'newWindow' : false,
'mode' : 'static',
'contentLocation' : 'tipuedrop/tipuedrop_content.json'
}, options);
return this.each(function() {
var tipuedrop_in = {
pages: []
};
$.ajaxSetup({
async: false
});
if (set.mode == 'json')
{
$.getJSON(set.contentLocation)
.done(function(json)
{
tipuedrop_in = $.extend({}, json);
});
}
if (set.mode == 'static')
{
tipuedrop_in = $.extend({}, tipuedrop);
}
$(this).keyup(function(event)
{
getTipuedrop($(this));
});
function getTipuedrop($obj)
{
if ($obj.val())
{
var c = 0;
for (var i = 0; i < tipuedrop_in.pages.length; i++)
{
var pat = new RegExp($obj.val(), 'i');
if ((tipuedrop_in.pages[i].name.search(pat) != -1 || tipuedrop_in.pages[i].description.search(pat) != -1) && c < set.show)
{
if (c == 0)
{
var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';
}
out += '<a href="' + tipuedrop_in.pages[i].id + '"';
if (set.newWindow)
{
out += ' target="_blank"';
}
out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].id + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
c++;
}
}
if (c != 0)
{
out += '</div></div>';
$('#tipue_drop_content').html(out);
$('#tipue_drop_content').fadeIn(set.speed);
}
}
else
{
$('#tipue_drop_content').fadeOut(set.speed);
}
}
$('html').click(function()
{
$('#tipue_drop_content').fadeOut(set.speed);
});
});
};
})(jQuery);
<script>
$(document).ready(function() {
$('#tipue_drop_input').tipuedrop({
'mode': 'json',
'contentLocation': 'http://barbarostudios.com/clientpreviews/lungavita2/api/search.php'
});
});
</script>
【问题讨论】:
-
您的控制台 (F12) 中是否有任何错误?
-
是这个:3tipuedrop.js:60 Uncaught TypeError: Cannot read property 'search' of undefined
-
看起来您在第 60 行将
tipuedrop_in.pages[i].name.search(pat)更改为tipuedrop_in.pages[i].title.search(pat)... 我在 JSON 文件中的任何地方都没有看到title,但我确实看到了name。更改的任何具体原因? -
我实际上把它改回了名字。我只是在尝试其他字段选项。
-
如果您向与 ID
159e522f-10fd-4577-ad3b-866da83d0054对应的子页面添加描述字段会怎样?
标签: javascript php jquery json