在搜索框中输入内容时,符合条件的内容会在下拉框中显示,如果没有符合条件的内容会提示没有符合条件的搜索。
<div class="search">
<div class="search-input">
<input onkeyup="Search.init(['name','hello','hi','happy'])" placeholder="搜索商家">
<i class="icon-search"></i>
<ul class="dropdown-menu nav sidebar-nav search-result hidden" role="menu">
</ul>
</div>
</div>
<script>
$(document).ready(function () {
});
var Search = function () {
function show_select_result(result) {
if (result.length == 0) {
not_search_result();
}
else {
clear_search_result();
_.each(result, function (item) {
$('.search-result').append("<li><a href='#'>" + item + "</a></li>");
})
}
}
function clear_search_result() {
$('.search-result li').remove();
$('.search-result p').remove();
}
function not_search_result() {
clear_search_result();
$('.search-result').append("<p>没有此类搜索结果</p>");
}
return {
init: function (array) {
var search = $('.search-input input').val();
if(search.length > 0) {
$('.search-result').removeClass('hidden');
if(array.length != 0) {
var result = [];
_.each(array, function(el) {
if (el.indexOf(search) != -1) {
result.push(el);
}
})
show_select_result(result);
}
else{
not_search_result();
}
}
else{
$('.search-result').addClass('hidden')
}
}
}
}();
</script>
分享到:
相关推荐
CSS 美化几款漂亮的网页搜索框 CSS 美化几款漂亮的网页搜索框
实现在文字输入时产生烟花效果,模仿网页360搜索框.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
分类搜索框特效推荐
可把源代码加入自己的网站,也可根据自己需要修改代码相关参数,增加自己的网站功能,为浏览者提供更好的体验。
一个带背景的搜索框特效,感觉不错,欢迎大家前来下载
VB在webbrowser控件中使用Document.body.innerhtml获取网页框架内的网页代码
仿简书APP的搜索功能,除了搜索框,其余位置为半透明背景。
jQuery拉伸搜索框网页特效
可切换搜索引擎的导航网页搜索框,可以换百度、谷歌、搜狗不同的搜索方式
jquery搜索框特效,制作一个jquery分类搜索框,当鼠标点击搜索框时,会滑动展示分类菜单,点击选择/过滤分类菜单进行分类搜索。
百度静态网页搜索框.html
在网上看到了别人做的搜索框,自己对其进行了改进,使其实现了简单的响应式。当网页宽度很小时,则隐藏框,只保留按钮
用WebView打开Http://www.baidu.co网页 在搜索框输入需要搜索的内容 点击百度一下按钮 得到框内文字 。
matlab开发-从命令行搜索网页搜索。将这个小实用程序添加到matlab路径中,以允许从命令行进行快速的Web搜索。
css3精美网页搜索框.zip
6种非常精美的Web前端搜索框展示(附源码)
用于网页中搜索框没话代码。CSS样式搜索框美化系列
网页搜索框设计浅析.doc
CSS3带凹槽搜索框 CSS3带凹槽搜索框网页特效.zip
网页中加入百度搜索和输入框提示功能 跟 百度的功能一样可以 加入你自己的网站中去