jQuery实现select模糊查询（反射机制）

网络编程 2025/1/14 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

通过如下代码就可以简单实现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(/[\-\[\]{}()*+"\\$&");
  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="/UploadFiles/2021-04-02/jquery-1.10.2.js">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

jQuery,select,模糊查询

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“jQuery实现select模糊查询（反射机制）”

暂无评论...

www.csstdc.com 快活林资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年01月14日

jQuery实现select模糊查询（反射机制）

Easyui笔记2：实现datagrid多行删除的示例代码

Angular2-primeNG文件上传模块FileUpload使用详解

评论“jQuery实现select模糊查询（反射机制）”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接