Javascript 使用类似jquery的自动完成功能进行Livesearch

我有jquery live search，当我键入一些内容时，我会看到结果，但当我单击结果时，我希望看到输入中的值。在我单击退出后，输入结果必须是

display:none但像自动完成一样，我尝试了一些东西，但无法应用

我不使用自动完成插件，因为我必须在结果中显示图像


$（文档）.ready（函数（）{
$（“#srehberText”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this.val（），
计数=0；
如果（！过滤器）{
$（“.commentlist li”）.fadeOut（）；
返回；
}
var regex=新的RegExp（过滤器，“i”）；
//循环浏览注释列表
$（“.commentlist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this）.text（）.search（regex）<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.fadeIn（）；
计数++；
}
});
});
});
ol{
列表样式类型：无；
填充：0；
宽度：600px；
}
输入{
宽度：600px；
填充：12px；
边框：1px实心#ccc；
颜色：#999；
}
李{
显示：无；
}
李英明{
右边距：5px；
}
李阿{
显示：块；
文字装饰：无；
颜色：#666；
字体：16px塔荷马；
填充：4px；
}
李娜：停下来{
背景#fffff0；
颜色：#333；
}















试试这些，我根据您的代码为您提供了两个选择。我希望他们能帮助你实现你想要的

单选：


$（文档）.ready（函数（）{
$（“#srehberText”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this.val（），
计数=0；
如果（！过滤器）{
$（“.commentlist li”）.fadeOut（）；
返回；
}
var regex=新的RegExp（过滤器，“i”）；
//循环浏览注释列表
$（“.commentlist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this）.text（）.search（regex）<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.fadeIn（）；
计数++；
}
});
});
});
$（'.commentlist li a'）。单击（函数（）{
$（'.commentlist'）.fadeOut（）；
$（“#srehberText”）.val（$（this.text（））
})
ol{
列表样式类型：无；
填充：0；
宽度：600px；
}
输入{
宽度：600px；
填充：12px；
边框：1px实心#ccc；
颜色：#999；
}
李{
显示：无；
}
李英明{
右边距：5px；
}
李阿{
显示：块；
文字装饰：无；
颜色：#666；
字体：16px塔荷马；
填充：4px；
}
李娜：停下来{
背景#fffff0；
颜色：#333；
}
















$（文档）.ready（函数（）{
$（“.commentlist li”）。单击（函数（）{
$（“#srehberText”）.val（$（this.text（））；
//你们有一个输入框。这就是为什么只有文本被输入到侧面。
//您需要在输入旁边放置小图像控件以显示图像
});
$（“#srehberText”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this.val（），
计数=0；
如果（！过滤器）{
$（“.commentlist li”）.fadeOut（）；
返回；
}
var regex=新的RegExp（过滤器，“i”）；
//循环浏览注释列表
$（“.commentlist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this）.text（）.search（regex）<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.fadeIn（）；
计数++；
}
});
});
});
ol{
列表样式类型：无；
填充：0；
宽度：600px；
}
输入{
宽度：600px；
填充：12px；
边框：1px实心#ccc；
颜色：#999；
}
李{
显示：无；
}
李英明{
右边距：5px；
}
李阿{
显示：块；
文字装饰：无；
颜色：#666；
字体：16px塔荷马；
填充：4px；
}
李娜：停下来{
背景#fffff0；
颜色：#333；
}















希望这样可以


$（文档）.ready（函数（）{
$（“#srehberText”）.keyup（函数（）{
//检索输入字段文本并将计数重置为零
var filter=$（this.val（），
计数=0；
如果（！过滤器）{
$（“.commentlist li”）.fadeOut（）；
返回；
}
var regex=新的RegExp（过滤器，“i”）；
//循环浏览注释列表
$（“.commentlist li”）。每个（函数（）{
//如果列表项不包含文本短语，请将其淡出
if（$（this）.text（）.search（regex）<0）{
$（this.hide（）；
//如果短语匹配，则显示列表项并将计数增加1
}否则{
$（this.fadeIn（）；
计数++；
}
});
});
$（“.commentlist li a”）。单击（函数（）{
var val=$（this.text（）；
$（“#srehberText”）.val（val）；
$（'.commentlist li'）.fadeOut（）；
});
});
ol{
列表样式类型：无；
填充：0；
宽度：600px；
}
输入{
宽度：600px；
填充：12px；
边框：1px实心#ccc；
颜色：#999；
}
李{
显示：无；
}
李英明{
右边距：5px；
}
李阿{
显示：块；
文字装饰：无；
颜色：#666；
字体：16px塔荷马；
填充：4px；
}
李娜：停下来{
背景#fffff0；
颜色：#333；
}















制作invi列表
<input type="text" onblur="listHide()">

<script>
var molist = false; //mouse-over list
// make events mouseover and mouse leve to change molist value

function listHide() {
    if (molist = false) { //hide list}
}
</script>