当前位置：Gxlcms > JavaScript > 发一个数据过滤的代码，很简单，有用的着的拿去

发一个数据过滤的代码，很简单，有用的着的拿去

时间：2021-07-01 10:21:17 帮助过：15人阅读

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<HTML><HEAD><TITLE>Filterlist Example</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312">  
<script type="text/javascript"> 
<!-- 
    /*==================================================* 
 $Id: filterlist.js,v 1.3 2003/10/08 17:13:49 pat Exp $ 
 Copyright 2003 Patrick Fitzgerald 
 http://www.barelyfitz.com/webdesign/articles/filterlist/

This program is free software; you can redistribute it and/or modify 
 it under the terms of the GNU General Public License as published by 
 the Free Software Foundation; either version 2 of the License, or 
 (at your option) any later version.

This program is distributed in the hope that it will be useful, 
 but WITHOUT ANY WARRANTY; without even the implied warranty of 
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
 GNU General Public License for more details.

You should have received a copy of the GNU General Public License 
 along with this program; if not, write to the Free Software 
 Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA ?-1307  USA 
 *==================================================*/

function filterlist(selectobj) {

//================================================== 
  // PARAMETERS 
  //==================================================

// HTML SELECT object 
  // For example, set this to document.myform.myselect 
  this.selectobj = selectobj;

// Flags for regexp matching. 
  // "i" = ignore case; "" = do not ignore case 
  // You can use the set_ignore_case() method to set this 
  this.flags = 'i';

// Which parts of the select list do you want to match? 
  this.match_text = true; 
  this.match_value = false;

// You can set the hook variable to a function that 
  // is called whenever the select list is filtered. 
  // For example: 
  // this.hook = function() { //alert()}

// Flag for debug alerts 
  // Set to true if you are having problems. 
  this.show_debug = false;

//================================================== 
  // METHODS 
  //==================================================

//-------------------------------------------------- 
  this.init = function() { 
    // This method initilizes the object. 
    // This method is called automatically when you create the object. 
    // You should call this again if you alter the selectobj parameter.

if (!this.selectobj) return this.debug('selectobj not defined'); 
    if (!this.selectobj.options) return this.debug('selectobj.options not defined');

// Make a copy of the select list options array 
    this.optionscopy = new Array(); 
    if (this.selectobj && this.selectobj.options) { 
      for (var i=0; i < this.selectobj.options.length; i++) {

// Create a new Option 
        this.optionscopy[i] = new Option();

// Set the text for the Option 
        this.optionscopy[i].text = selectobj.options[i].text;

// Set the value for the Option. 
        // If the value wasn't set in the original select list, 
        // then use the text. 
        if (selectobj.options[i].value) { 
          this.optionscopy[i].value = selectobj.options[i].value; 
        } else { 
          this.optionscopy[i].value = selectobj.options[i].text; 
        }

} 
    } 
  }

//-------------------------------------------------- 
  this.reset = function() { 
    // This method resets the select list to the original state. 
    // It also unselects all of the options.

this.set(''); 
  }

//-------------------------------------------------- 
  this.set = function(pattern) { 
    // This method removes all of the options from the select list, 
    // then adds only the options that match the pattern regexp. 
    // It also unselects all of the options.

var loop=0, index=0, regexp, e;

if (!this.selectobj) return this.debug('selectobj not defined'); 
    if (!this.selectobj.options) return this.debug('selectobj.options not defined');

// Clear the select list so nothing is displayed 
    this.selectobj.options.length = 0;

// Set up the regular expression. 
    // If there is an error in the regexp, 
    // then return without selecting any items. 
    try {

// Initialize the regexp 
      regexp = new RegExp(pattern, this.flags);

} catch(e) {

// There was an error creating the regexp.

// If the user specified a function hook, 
      // call it now, then return 
      if (typeof this.hook == 'function') { 
        this.hook(); 
      }

return; 
    }

// Loop through the entire select list and 
    // add the matching items to the select list 
    for (loop=0; loop < this.optionscopy.length; loop++) {

// This is the option that we're currently testing 
      var option = this.optionscopy[loop];

// Check if we have a match 
      if ((this.match_text && regexp.test(option.text)) || 
          (this.match_value && regexp.test(option.value))) {

// We have a match, so add this option to the select list 
        // and increment the index

this.selectobj.options[index++] = 
          new Option(option.text, option.value, false);

} 
    }

// If the user specified a function hook, 
    // call it now 
    if (typeof this.hook == 'function') { 
      this.hook(); 
    }

}

//-------------------------------------------------- 
  this.set_ignore_case = function(value) { 
    // This method sets the regexp flags. 
    // If value is true, sets the flags to "i". 
    // If value is false, sets the flags to "".

if (value) { 
      this.flags = 'i'; 
    } else { 
      this.flags = ''; 
    } 
  }

//-------------------------------------------------- 
  this.debug = function(msg) { 
    if (this.show_debug) { 
      alert('FilterList: ' + msg); 
    } 
  }

//================================================== 
  // Initialize the object 
  //================================================== 
  this.init();

}

//--> 
</script>

<META content="MSHTML 6.00.2900.3020" name=GENERATOR></HEAD> 
<BODY> 
<H1>Filterlist Example</H1> 
<FORM name=myform action=""><SELECT size=5 name=myselect> <OPTION>Keanu  
  Reeves<OPTION>Laurence Fishburne<OPTION>Monica Bellucci<OPTION>Daniel  
  Bernhardt<OPTION>Nona Gaye<OPTION>Lachy Hulme<OPTION>Nathaniel  
  Lees<OPTION>Harry J. Lennix<OPTION>Matt McColm<OPTION>Carrie-Anne  
  Moss<OPTION>Collin Chou<OPTION>Genevieve O'Reilly<OPTION>Harold Perrineau  
  Jr.<OPTION>Jada Pinkett Smith<OPTION>Adrian Rayment<OPTION>Neil  
  Rayment<OPTION>Bruce Spence<OPTION>Hugo Weaving<OPTION>Lambert  
  Wilson<OPTION>Anthony Wong</OPTION></SELECT> 
<SCRIPT type=text/javascript> 
 
</SCRIPT> 
  
<P>Filter: Clear A B C D E F G H I J K L M N O P Q R S T U V W X Y Z  
<P>Filter by regular expression:
<INPUT onkeyup=myfilter.set(this.value)  
name=regexp> <INPUT onclick=myfilter.set(this.form.regexp.value) type=button value=Filter> <INPUT onclick="myfilter.reset();this.form.regexp.value=''" type=button value=Clear>

<INPUT onclick=myfilter.set_ignore_case(!this.checked) type=checkbox  
name=toLowerCase> Case-sensitive </FORM></P></BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

发一个数据过滤的代码，很简单，有用的着的拿去

人气教程排行