Javascript 页面加载时隐藏的自动完成搜索栏容器

找到了解决方案：

$(function () {
    $('.preview').removeClass('hidden');
});

添加了一个带有display:none:

   .hidden { display: none; }

并添加了此功能：

$(function () {
    $('.preview').removeClass('hidden');
});

---

我有一个使用JS Autocomplete的搜索栏，有一个容器（预览）和一个左表（leftspan）以及结果无序列表

我使用此脚本显示列表，并在单击容器外时隐藏结果下拉列表容器：

   // Show the ul
$suggestedUL.show();
}
if ($(this).val() == '') {
$suggestedUL.hide();
}
},

focus: function(e) {
if ($(this).val() != '') {
$suggestedUL.show();
}
}
});

$suggestedHL.on('click', 'li', function(e) {
addSuggestion($(this));
});

$('body').on('click', function (e) {
      if (!$(e.target).closest('.suggest-holder li, .leftspan, .suggest-holder input').length) {
           $suggestedUL.hide();
           $preview.hide();
       };
});

但是，当页面第一次加载时，空的preview div可见（它有1px边框）

此外，如果在输入字段中键入搜索后尝试单击返回列表，上面的脚本将继续隐藏它

是否有更好的函数写入而不是隐藏，以便在页面加载时隐藏div，但在单击输入字段并再次返回后仍能正常工作？

$(function () {
    $('.preview').removeClass('hidden');
});

完整的HTML、JS和CSS如下：

var数据=[{
图片：src=“a.jpg”，
名字：'苹果'，
sku:'61583318'
},
{
图片：src=“b.jpg”，
名称：“橙子”，
sku:'924335'
},
{
图片：src=“c.jpg”，
名称：“草莓”，
sku:'73940'
},
{
图片：src=“d.jpg”，
名称：“字符串禁止”，
sku:'66155'
},
{
图片：src=“e.jpg”，
名字：'葡萄'，
sku:'112509'
},
{
图片：src=“f.jpg”，
名称：‘杏’，
sku:'112984'
}];
//建议持有人
var$suggestedHL=$（'建议持有人'）；
//建议UL
变量$suggestedUL=$（'ul'，$suggestedHL）；
//建议李
变量$suggestedLI=$（'li'，$suggestedHL）；
//选定项目UL
var$selectedUL=$（“#所选建议”）；
//预览分区
变量$preview=$（'.preview'）；
//键盘导航索引
var指数=-1；
功能添加建议（el）{
$selectedUL.append（$（'
'+el.find（'.suggest name'）.html（）+'
'））；
}
$（'input'，$suggestedHL）.on({
键控：功能（e）{
var m=假；
如果（e.which==38）{
如果（--指数<0）{
指数=0；
}
m=真；
}否则如果（e.which==40）{
如果（++索引>$suggestedLI.length-1）{
索引=$suggestedLI.length-1；
}
m=真；
}
如果（m）{
//删除活动类
$（'li.active'，$suggestedHL）.removeClass（'active'）；
$suggestedLI.eq（index.addClass（'active'）；
}否则如果（e.which==27）{
指数=-1；
//Esc键
$suggestedUL.hide（）；
}否则如果（e.which==13）{
//输入键
如果（索引>-1）{
添加建议（$（'li.active'，$suggestedHL））；
指数=-1；
$（'li.active'，$suggestedHL）.removeClass（'active'）；
}
}否则{
指数=-1；
//清除ul
$suggestedUL.empty（）；
//缓存搜索项
$search=$（this.val（）；
//搜索正则表达式
$search=newregexp（$search.replace（/[^0-9a-z_]/i），'i'）；
//更新搜索下面的左框
$（'.leftspan'）.html（'+$（'.suggest prompt'）.val（）+'在类别XXX'）；
//在数组中循环
用于（数据中的var i）{
if（数据[i].name.match（$search））{
$suggestedUL.append（$（“
”+数据[i].name+”+数据[i].sku+“
”）；
}
}
//展示ul
$suggestedUL.show（）；
}
if（$（this.val（）=''）{
$suggestedUL.hide（）；
}
},
重点：职能（e）{
if（$（this.val（）！=“”）{
$suggestedUL.show（）；
}
}
});
$suggestedHL.on（'click'，'li'，函数（e）{
添加建议（$（本））；
});
$（'body'）。在（'click'，函数（e）上{
if（！$（e.target）.最近（'.suggest holder li、.leftspan、.suggest holder input'）.length）{
$suggestedUL.hide（）；
$preview.hide（）；
};
});
body{背景色：#eeeeee；}
.预览{
边框：1件纯色$灰色打火机；
背景颜色：绿色；
宽度：63%；
位置：绝对位置；
z指数：100；
}
.预览ul{
列表样式：无；
边缘顶部：5px；
宽度：65%；
}
.预览：李{
填充物：5px；
职位：继承；
}
李：悬停{
光标：指针；
}
李:悬停,，
李：很活跃{
背景：rgba（100100100.2）；
}
}
.建议姓名{
字体大小：粗体；
显示：块；
左边距：40px；
}
.建议sku{
字体：斜体；
字体大小：$小字体大小；
颜色：$灰色光；
}
.建议图像{
高度：35px；
浮动：左；
右侧填充：5px；
利润上限：-20px；
}
.inlineblock{
显示：内联块；
}
.leftspan{
利润率：15px；
显示：内联块；
浮动：左；
}
.搜索{
颜色：$品牌初级；
}
标题.搜索块{
输入{
边框右上角半径：0；
边框右下半径：0；
宽度：65%！重要；
@介质（最大宽度：$X屏）{
宽度：47%！重要；
}
}
挑选{
边框左上半径：0；
边框左下半径：0；
垫面：5px；
左侧填充：5px；
垫底：5px；
右侧填充：5px；
左边距：-5px；
宽度：20%！重要；
@介质（最大宽度：$X屏）{
宽度：30%！重要；
}
}
钮扣{
垂直对齐：顶部；
宽度：14%！重要；
@介质（最小宽度：$screen lg）{
宽度：8%！重要；
}
@介质（最大宽度：$X屏）{
宽度：21%！重要；
}
}
.表格组{
>形式{
> * {
显示：内联块；
}
@介质（最大宽度：$X屏）{
文本对齐：居中；
左边距：0；
右边距：0；
@包括垫面（0）；
}
}
}
}
输入：焦点：：-webkit输入占位符{
颜色：透明；
}
输入：焦点：-moz占位符{
颜色：透明；
}
输入：焦点：：-moz占位符{
颜色：透明；
}
输入：焦点：-ms输入占位符{
颜色：透明；
}

全部的
一
二
三
去