1.searchableSelect下拉选(搜索形式为%reg%)
注意点:用js加载下拉框,有两种实现方式
(1)js加载完后给下拉选调$('select').searchableSelect();
(2)js加载前调则js加载后需重新加载select
//1 执行完毕后去掉之前生成的div
$("#choose + div").remove();
//2 重新生成一个div
$('#choose').searchableSelect({
afterSelectItem: function(){//此方法是点击后激活事件 :关闭下拉框
$('.searchable-select-dropdown').addClass('searchable-select-hide');
}
});
//3 生成的同时打开下拉框
$('.searchable-select-dropdown').removeClass('searchable-select-hide');
index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>带搜索框的jQuery下拉框美化插件 searchableSelect</title>
<link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.searchableSelect.js"></script>
</head>
<body>
<select id="choose">
<option value="jQuery插件库">jQuery插件库</option>
<option value="BlackBerry">BlackBerry</option>
<option value="device">device</option>
<option value="with">with</option>
<option value="entertainment">entertainment</option>
<option value="and">and</option>
<option value="social">social</option>
<option value="networking">networking</option>
<option value="apps">apps</option>
<option value="or">or</option>
<option value="apps">apps</option>
<option value="that">that</option>
<option value="will">will</option>
<option value="boost">boost</option>
<option value="your">your</option>
<option value="productivity">productivity</option>
<option value="Download">Download</option>
<option value="or">or</option>
<option value="buy">buy</option>
<option value="apps">apps</option>
<option value="from">from</option>
<option value="Afbb">Afbb</option>
<option value="Akademie">Akademie</option>
<option value="Berlin">Berlin</option>
<option value="reviews">reviews</option>
<option value="by">by</option>
<option value="real">real</option>
</select>
<script>
$(function(){
$('select').searchableSelect();
$('#choose').append("<option value='1'>湖北</option>");
$('#choose').append("<option value='2'>河北</option>");
//1 执行完毕后去掉之前生成的div
$("#choose + div").remove();
//2 重新生成一个div
$('#choose').searchableSelect({
afterSelectItem: function(){//此方法是点击后激活事件 :关闭下拉框
$('.searchable-select-dropdown').addClass('searchable-select-hide');
}
});
//3 生成的同时打开下拉框
$('.searchable-select-dropdown').removeClass('searchable-select-hide');
});
</script>
</body>
</html>
使用插件链接如下:
jQuery-searchableSelect所需js及css
2.chosen.jquery下拉选(搜索形式为reg%)
注意点:用js加载下拉框,有两种实现方式
(1)js加载完后给下拉选调$('select').chosen();
(2)js加载前调则js加载后需重新加载select
$("#choose").trigger("liszt:updated");
index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>带搜索框的jQuery下拉框美化插件 searchableSelect</title>
<link href="css/chosen.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/chosen.jquery.js"></script>
</head>
<body>
<select id="choose" data-placeholder="请选择" style="width:200px;" tabindex="2">
<option value=""></option>
<option value="jQuery插件库">jQuery插件库</option>
<option value="BlackBerry">BlackBerry</option>
<option value="device">device</option>
<option value="with">with</option>
<option value="entertainment">entertainment</option>
<option value="and">and</option>
<option value="social">social</option>
<option value="networking">networking</option>
<option value="apps">apps</option>
<option value="or">or</option>
<option value="apps">apps</option>
<option value="that">that</option>
<option value="will">will</option>
<option value="boost">boost</option>
<option value="your">your</option>
<option value="productivity">productivity</option>
<option value="Download">Download</option>
<option value="or">or</option>
<option value="buy">buy</option>
<option value="apps">apps</option>
<option value="from">from</option>
<option value="Afbb">Afbb</option>
<option value="Akademie">Akademie</option>
<option value="Berlin">Berlin</option>
<option value="reviews">reviews</option>
<option value="by">by</option>
<option value="real">real</option>
</select>
<script>
$(function(){
$('select').chosen();
$('#choose').append("<option value='1'>湖北</option>");
$('#choose').append("<option value='2'>河北</option>");
$("#choose").trigger("liszt:updated");
});
</script>
</body>
</html>
使用插件链接如下:
目录截图如下:
img下只有一张图片,即为
chosen-sprite.png(样式截图如下,图片直接放出不清晰变形了,可以去插件链接里下载)