这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要为大家详细介绍了 jQuery 实现 select 带模糊查询的条件查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
通过如下代码就可以简单实现 select 带模糊查询的条件查询,具体如下 jquery.select.js 如下:
- (function($) {
- $.selectSuggest = function(target, data, itemSelectFunction) {
- var defaulOption = {
- suggestMaxHeight: '200px',
- //弹出框最大高度
- itemColor: '#000000',
- //默认字体颜色
- itemBackgroundColor: 'RGB(199,237,204)',
- //默认背景颜色
- itemOverColor: '#ffffff',
- //选中字体颜色
- itemOverBackgroundColor: '#C9302C',
- //选中背景颜色
- itemPadding: 3,
- //item间距
- fontSize: 12,
- //默认字体大小
- alwaysShowALL: true //点击input是否展示所有可选项
- };
- var maxFontNumber = 0; //最大字数
- var currentItem;
- var suggestContainerId = target + "-suggest";
- var suggestContainerWidth = $('#' + target).innerWidth();
- var suggestContainerLeft = $('#' + target).offset().left;
- var suggestContainerTop = $('#' + target).offset().top + $('#' + target).outerHeight();
- var showClickTextFunction = function() {
- $('#' + target).val(this.innerText);
- currentItem = null;
- $('#' + suggestContainerId).hide();
- }
- var suggestContainer;
- if ($('#' + suggestContainerId)[0]) {
- suggestContainer = $('#' + suggestContainerId);
- suggestContainer.empty();
- } else {
- suggestContainer = $('<div></div>'); //创建一个子<div>
- }
- suggestContainer.attr('id', suggestContainerId);
- suggestContainer.attr('tabindex', '0');
- suggestContainer.hide();
- var _initItems = function(items) {
- suggestContainer.empty();
- var itemHight = 0;
- for (var i = 0; i < items.length; i++) {
- if (items[i].text.length > maxFontNumber) {
- maxFontNumber = items[i].text.length;
- }
- var suggestItem = $('<div></div>'); //创建一个子<div>
- suggestItem.attr('id', items[i].id);
- suggestItem.append(items[i].text);
- suggestItem.CSS({
- 'padding': defaulOption.itemPadding + 'px',
- 'white-space': 'nowrap',
- 'cursor': 'pointer',
- 'background-color': defaulOption.itemBackgroundColor,
- 'color': defaulOption.itemColor
- });
- suggestItem.bind("mouseover",
- function() {
- $(this).css({
- 'background-color': defaulOption.itemOverBackgroundColor,
- 'color': defaulOption.itemOverColor
- });
- currentItem = $(this);
- });
- suggestItem.bind("mouseout",
- function() {
- $(this).css({
- 'background-color': defaulOption.itemBackgroundColor,
- 'color': defaulOption.itemColor
- });
- currentItem = null;
- });
- suggestItem.bind("click", showClickTextFunction);
- suggestItem.bind("click", itemSelectFunction);
- suggestItem.appendTo(suggestContainer);
- suggestContainer.appendTo(document.body);
- }
- }
- var inputChange = function() {
- var inputValue = $('#' + target).val();
- inputValue = inputValue.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
- var matcher = new RegExp(inputValue, "i");
- return $.grep(data,
- function(value) {
- return matcher.test(value.text);
- });
- }
- $('#' + target).bind("keyup",
- function() {
- _initItems(inputChange());
- });
- $('#' + target).bind("blur",
- function() {
- if (!$('#' + suggestContainerId).is(":focus")) {
- $('#' + suggestContainerId).hide();
- if (currentItem) {
- currentItem.trigger("click");
- }
- currentItem = null;
- return;
- }
- });
- $('#' + target).bind("click",
- function() {
- if (defaulOption.alwaysShowALL) {
- _initItems(data);
- } else {
- _initItems(inputChange());
- }
- $('#' + suggestContainerId).removeAttr("style");
- var tempWidth = defaulOption.fontSize * maxFontNumber + 2 * defaulOption.itemPadding + 30;
- var containerWidth = Math.max(tempWidth, suggestContainerWidth);
- var h = this.scrollHeight;
- $('#' + suggestContainerId).css({
- 'border': '1px solid #ccc',
- 'max-height': '100px',
- 'top': suggestContainerTop,
- 'left': suggestContainerLeft,
- 'width': containerWidth,
- 'position': 'absolute',
- 'font-size': defaulOption.fontSize + 'px',
- 'font-family': 'Arial',
- 'z-index': 99999,
- 'background-color': '#FFFFFF',
- 'overflow-y': 'auto',
- 'overflow-x': 'hidden',
- 'white-space': 'nowrap'
- });
- $('#' + suggestContainerId).show();
- });
- _initItems(data);
- $('#' + suggestContainerId).bind("blur",
- function() {
- $('#' + suggestContainerId).hide();
- });
- }
- })(jQuery);
html 如下:
- <!DOCTYPE html>
- <html lang="zh_cn">
- <head>
- <title>
- select.suggest
- </title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <script src="js/jquery-1.10.2.js">
- </script>
- <script src="js/jquery.select.js">
- </script>
- </head>
- <body>
- <h1>
- Hello, world!
- </h1>
- <div>
- <div>
- <div>
- .col-md-1
- </div>
- <div style="">
- <input id="testInput" type="text" />
- </div>
- </div>
- </div>
- <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
- <!-- Include all compiled plugins (below), or include individual files
- as needed -->
- </body>
- <script type="text/javascript">
- var datas = [{
- "id": "2",
- "text": "中国石油"
- },
- {
- "id": "4",
- "text": "中国建筑"
- },
- {
- "id": "3",
- "text": "中国移动"
- },
- {
- "id": "5",
- "text": "中国工商银行"
- },
- {
- "id": "7",
- "text": "中国铁建"
- },
- {
- "id": "8",
- "text": "上海汽车集团"
- },
- {
- "id": "9",
- "text": "中国建设银行"
- },
- {
- "id": "10",
- "text": "联想集团"
- }];
- var itemSelectFuntion = function() {
- alert(this.id + "," + this.innerHTML);
- };
- $.selectSuggest('testInput', datas, itemSelectFuntion);
- </script>
- </html>
来源: http://www.phperz.com/article/17/0506/328516.html