`
ioio
  • 浏览: 141965 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

flexselect相应onchange事件

阅读更多

jquery.flexselect.js

 

 

/*
 * flexselect: a jQuery plugin, version: 0.2 (2009-03-16)
 * @requires jQuery v1.3 or later
 * Download by http://www.codefans.net
 * FlexSelect is a jQuery plugin that makes it easy to convert a select box into
 * a Quicksilver-style, autocompleting, flex matching selection tool.
 *
 * For usage and examples, visit:
 * http://rmm5t.github.com/jquery-flexselect/
 *
 * Licensed under the MIT:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Copyright (c) 2009, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org)
 */
(function($) {
  $.flexselect = function(select, options) { this.init(select, options); };

  $.extend($.flexselect.prototype, {
    settings: {
      allowMismatch: false,
      selectedClass: "flexselect_selected",
      dropdownClass: "flexselect_dropdown",
      inputIdTransform:    function(id)   { return id + "_flexselect"; },
      inputNameTransform:  function(name) { return; },
      dropdownIdTransform: function(id)   { return id + "_flexselect_dropdown"; }
    },
    select: null,
    input: null,
    hidden: null,
    dropdown: null,
    dropdownList: null,
    cache: [],
    results: [],
    lastAbbreviation: null,
    abbreviationBeforeFocus: null,
    selectedIndex: 0,
    picked: false,
    dropdownMouseover: false, // Workaround for poor IE behaviors

    init: function(select, options) {
      $.extend(this.settings, options);
      this.select = $(select);
      this.preloadCache();
      this.renderControls();
      this.wire();
    },

    preloadCache: function() {
      this.cache = this.select.children("option").map(function() {
        return { name: $.trim($(this).text()), value: $(this).val(), score: 0.0 };
      });
    },

    renderControls: function() {
      var selected = this.select.children("option:selected");

      this.hidden = $("<input type='text'/>").attr({
        id: this.select.attr("id"),
        name: this.select.attr("name")
      }).val(selected.val());

      this.input = $("<input type='text' autocomplete='off' />").attr({
        id: this.settings.inputIdTransform(this.select.attr("id")),
        name: this.settings.inputNameTransform(this.select.attr("name")),
        accesskey: this.select.attr("accesskey"),
        tabindex: this.select.attr("tabindex"),
        style: this.select.attr("style")
      }).addClass(this.select.attr("class")).val($.trim(selected.text()));

      this.dropdown = $("<div></div>").attr({
        id: this.settings.dropdownIdTransform(this.select.attr("id"))
      }).addClass(this.settings.dropdownClass);
      this.dropdownList = $("<ul></ul>");
      this.dropdown.append(this.dropdownList);

      this.select.after(this.input).after(this.hidden).remove();
      $("body").append(this.dropdown);
    },

    wire: function() {
      var self = this;

      this.input.click(function() {
        self.lastAbbreviation = null;
        self.focus();
      });

      this.input.mouseup(function(event) {
        // This is so Safari selection actually occurs.
        event.preventDefault();
      });

      this.input.focus(function() {
        self.abbreviationBeforeFocus = self.input.val();
        self.input.select();
        if (!self.picked) self.filterResults();
      });

      this.input.blur(function() {
        if (!self.dropdownMouseover) {
          self.hide();
          if (!self.picked) self.reset();
        }
      });

      this.dropdownList.mouseover(function (event) {
        if (event.target.tagName == "LI") {
          var rows = self.dropdown.find("li");
          self.markSelected(rows.index($(event.target)));
        }
      });
      this.dropdownList.mouseleave(function () {
        self.markSelected(-1);
      });
      this.dropdownList.mouseup(function (event) {
        self.pickSelected();
        self.focusAndHide();
      });
      this.dropdown.mouseover(function (event) {
        self.dropdownMouseover = true;
      });
      this.dropdown.mouseleave(function (event) {
        self.dropdownMouseover = false;
      });
      this.dropdown.mousedown(function (event) {
        event.preventDefault();
      });

      this.input.keyup(function(event) {
        switch (event.keyCode) {
          case 13: // return
            event.preventDefault();
            self.pickSelected();
            self.focusAndHide();
            break;
          case 27: // esc
            event.preventDefault();
            self.reset();
            self.focusAndHide();
            break;
          default:
            self.filterResults();
            break;
        }
      });

      this.input.keydown(function(event) {
        switch (event.keyCode) {
          case 9:  // tab
            self.pickSelected();
            self.hide();
            break;
          case 33: // pgup
            event.preventDefault();
            self.markFirst();
            break;
          case 34: // pgedown
            event.preventDefault();
            self.markLast();
            break;
          case 38: // up
            event.preventDefault();
            self.moveSelected(-1);
            break;
          case 40: // down
            event.preventDefault();
            self.moveSelected(1);
            break;
          case 13: // return
          case 27: // esc
            event.preventDefault();
            event.stopPropagation();
            break;
        }
      });
    },

    filterResults: function() {
      var abbreviation = this.input.val();
      if (abbreviation == this.lastAbbreviation) return;

      var results = [];
      $.each(this.cache, function() {
        this.score = LiquidMetal.score(this.name, abbreviation);
        if (this.score > 0.0) results.push(this);
      });
      this.results = results;

      this.sortResults();
      this.renderDropdown();
      this.markFirst();
      this.lastAbbreviation = abbreviation;
      this.picked = false;
    },

    sortResults: function() {
      this.results.sort(function(a, b) { return b.score - a.score; });
    },

    renderDropdown: function() {
      var dropdownBorderWidth = this.dropdown.outerWidth() - this.dropdown.innerWidth();
      var inputOffset = this.input.offset();
      this.dropdown.css({
        width: (this.input.outerWidth() - dropdownBorderWidth) + "px",
        top: (inputOffset.top + this.input.outerHeight()) + "px",
        left: inputOffset.left + "px"
      });

      var list = this.dropdownList.html("");
      $.each(this.results, function() {
        // list.append($("<li/>").html(this.name + " <small>[" + Math.round(this.score*100)/100 + "]</small>"));
        list.append($("<li/>").html(this.name));
      });
      this.dropdown.show();
    },
    markSelected: function(n) {
      if (n > this.results.length) return;

      var rows = this.dropdown.find("li");
      rows.removeClass(this.settings.selectedClass);
      this.selectedIndex = n;

      if (n >= 0) $(rows[n]).addClass(this.settings.selectedClass);
    },

    pickSelected: function() {
      var selected = this.results[this.selectedIndex];
      if (selected) {
        this.input.val(selected.name);
        this.hidden.val(selected.value);
  ///document.getElementById("module").value=selected.value;
        this.picked = true;

      } else if (this.settings.allowMismatch) {
        this.hidden.val("");
      } else {
   // changeModule();
        this.reset();
      }
   //执行onchange方法
   doonchange();
    },

    hide: function() {
      this.dropdown.hide();
      this.lastAbbreviation = null;
    },

    moveSelected: function(n) { this.markSelected(this.selectedIndex+n); },
    markFirst:    function()  { this.markSelected(0); },
    markLast:     function()  { this.markSelected(this.results.length - 1); },
    reset:        function()  { this.input.val(this.abbreviationBeforeFocus); },
    focus:        function()  { this.input.focus(); },
    focusAndHide: function()  { this.focus(); this.hide(); }
  });

  $.fn.flexselect = function(options) {
    this.each(function() {
      if (this.tagName == "SELECT") new $.flexselect(this, options);
    });
    return this;
  };
})(jQuery);

分享到:
评论

相关推荐

    select 选择同一值触发onchange事件

    web前端小问题,select 选择事件,当选择select同一值触发onchange事件

    使用Delphi的OnChange事件,Timagelist组件..rar

    在这个主题中,我们将深入探讨如何使用Timagelist组件以及其onChange事件。 首先,让我们了解Timagelist组件的基本功能。Timagelist不仅能够存储图像,还支持多种图像格式,如BMP、JPEG、PNG等。你可以通过它的`Add...

    odoo定时执行onchange事件模块

    安装该模块后,对于有写onchange方法的字段,可以设置定时执行时间间隔。

    js触发onchange事件的方法说明

    js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件。但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的。 那么,如何...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在 EasyUI 中,`onchange` 事件同样适用于 `easyui-textbox` 和 `easyui-combobox`,可以用来监听用户在这些组件上的操作,例如输入或选择值后进行相应的处理。 以下是一个基本的 `onchange` 事件响应实例: ```...

    ckeditor onchange 事件插件

    2. **配置 CKEditor**:在 CKEditor 初始化时,需要进行相应的配置以启用 "onchange" 事件。例如: ```javascript CKEDITOR.replace('editor', { extraPlugins: 'onchange', onChange: function() { // 这里...

    javascript的onchange事件与jQuery的change()方法比较

    改变一下思路变成键盘按键事件,如下: ”txtName” runat=”server” xss=removed&gt;&lt;/asp&gt; 这里有一点毛病是,你复制粘贴的内容,无法触发这个事件。下面是相关的一些代码: 代码如下: function fNameChange(){ if($...

    js 触发select onchange事件代码

    在前端开发中,select元素和text文本输入框元素经常需要处理用户的交互行为,其中onchange事件是一个非常重要的事件。onchange事件会在元素的内容改变并且失去焦点后触发。但在JavaScript中,直接给select或text赋值...

    jsp中select的onchange事件用法实例.docx

    ### JSP中Select的onchange事件用法实例详解 #### 一、引言 在Web开发中,`onchange`事件是一种常用的JavaScript事件,用于在用户更改表单元素(如`&lt;select&gt;`下拉列表)时触发特定的操作。在JSP(JavaServer Pages...

    easy-ui onchange/easy-ui添加onchange

    在本文中,我们将深入探讨如何在Easy-UI框架中使用`onchange`事件,以及如何获取组合框(Combobox)的当前选中值。Easy-UI是一个基于jQuery的轻量级前端开发框架,它提供了丰富的组件,如表格、窗口、菜单、对话框等...

    Radio 单选JS动态添加的选项onchange事件无效的解决方法

    标题所指的知识点是“Radio单选JS动态添加的选项onchange事件无效的解决方法”。这个问题常常出现在使用JavaScript动态向页面中添加单选按钮(radio)时,为这些动态添加的单选按钮绑定的onchange事件无法正常触发。...

    javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

    在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...

    jsp中select的onchange事件用法实例

    在JSP页面中,为了响应select下拉列表选项的变化,我们通常使用JavaScript编写相应的处理函数,并将该函数与select的onchange事件关联起来。这样,当用户改变选项时,就会触发定义好的函数。如本文所示: ```html ...

    详解mpvue中使用vant时需要注意的onChange事件的坑

    在使用mpvue框架开发时,如果需要结合vant-weapp组件库,开发者会遇到一些特定的问题,特别是与onChange事件相关的坑。本文将深入探讨在mpvue环境下使用vant组件库时,如何正确使用onChange事件,以及需要留意的几个...

    js触发select onchange事件的小技巧

    在JavaScript编程中,`onchange`事件是经常用到的一个事件。当一个HTML元素的值发生变化时,就会触发`onchange`事件。对于`select`元素而言,通常期望在用户从下拉列表中选择一个不同的选项时触发此事件。然而,如果...

    JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    整体而言,本节内容演示了如何使用JQuery处理select下拉列表的变更事件,并在用户选择下拉选项时弹出相应的值,以及如何利用获取的这些值进行页面跳转和参数传递。这是一个非常实用的Web开发技巧,可以广泛应用于...

    Select的OnChange()事件

    在JavaScript中,我们可以为Select元素绑定一个onChange事件监听器,当选项发生变化时执行相应的函数。 在实际应用中,比如电子商务网站,用户经常需要通过下拉框选择不同的选项来筛选商品。每当用户改变选择时,...

Global site tag (gtag.js) - Google Analytics