`
desert3
  • 浏览: 2159524 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

大下拉框过滤 Filtering Large Select Lists(GPL开源协议)

 
阅读更多
Filtering Large Select Lists

<html><head>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<title>Filterlist Example</title>

<!-- Load the javascript code -->
<script type="text/javascript" src="example_files/filterlist.js"></script>

</head>
<body>
<h1>Filterlist Example</h1>

<form name="myform" action="">

<select name="myselect" size="5">
 <option>Keanu Reeves
 </option><option>Laurence Fishburne
 </option><option>汉字
 </option><option>汉语
 </option><option>Nona Gaye
 </option><option>Lachy Hulme
 </option><option>Nathaniel Lees
 </option><option>Harry J. Lennix
 </option><option>Matt McColm
 </option><option>Carrie-Anne Moss
 </option><option>Collin Chou
 </option><option>Genevieve O'Reilly
 </option><option>Harold Perrineau Jr.
 </option><option>Jada Pinkett Smith
 </option><option>Adrian Rayment
 </option><option>Neil Rayment
 </option><option>Bruce Spence
 </option><option>Hugo Weaving
 </option><option>Lambert Wilson
 </option><option>Anthony Wong
</option></select>

<script type="text/javascript">
<!--
var myfilter = new filterlist(document.myform.myselect);
//-->
</script>

<p>
Filter:
<a href="javascript:myfilter.reset()" title="Clear the filter">Clear</a>
<a href="javascript:myfilter.set('^A')" title="Show items starting with A">A</a>
<a href="javascript:myfilter.set('^B')" title="Show items starting with B">B</a>
<a href="javascript:myfilter.set('^C')" title="Show items starting with C">C</a>
<a href="javascript:myfilter.set('^D')" title="Show items starting with D">D</a>
<a href="javascript:myfilter.set('^E')" title="Show items starting with E">E</a>
<a href="javascript:myfilter.set('^F')" title="Show items starting with F">F</a>
<a href="javascript:myfilter.set('^G')" title="Show items starting with G">G</a>
<a href="javascript:myfilter.set('^H')" title="Show items starting with H">H</a>
<a href="javascript:myfilter.set('^I')" title="Show items starting with I">I</a>
<a href="javascript:myfilter.set('^J')" title="Show items starting with J">J</a>
<a href="javascript:myfilter.set('^K')" title="Show items starting with K">K</a>
<a href="javascript:myfilter.set('^L')" title="Show items starting with L">L</a>
<a href="javascript:myfilter.set('^M')" title="Show items starting with M">M</a>
<a href="javascript:myfilter.set('^N')" title="Show items starting with N">N</a>
<a href="javascript:myfilter.set('^O')" title="Show items starting with O">O</a>
<a href="javascript:myfilter.set('^P')" title="Show items starting with P">P</a>
<a href="javascript:myfilter.set('^Q')" title="Show items starting with Q">Q</a>
<a href="javascript:myfilter.set('^R')" title="Show items starting with R">R</a>
<a href="javascript:myfilter.set('^S')" title="Show items starting with S">S</a>
<a href="javascript:myfilter.set('^T')" title="Show items starting with T">T</a>
<a href="javascript:myfilter.set('^U')" title="Show items starting with U">U</a>
<a href="javascript:myfilter.set('^V')" title="Show items starting with V">V</a>
<a href="javascript:myfilter.set('^W')" title="Show items starting with W">W</a>
<a href="javascript:myfilter.set('^X')" title="Show items starting with X">X</a>
<a href="javascript:myfilter.set('^Y')" title="Show items starting with Y">Y</a>
<a href="javascript:myfilter.set('^Z')" title="Show items starting with Z">Z</a>

</p><p>

<!--
Note: if you have a very large select list,
you should deactivate the real-time filtering
on the INPUT field below - remove the onKeyUp attribute.
-->
Filter by regular expression:<br>
<input name="regexp" onkeyup="myfilter.set(this.value)">
<input onclick="myfilter.set(this.form.regexp.value)" value="Filter" type="button">
<input onclick="myfilter.reset();this.form.regexp.value=''" value="Clear" type="button">

<br>

<input name="toLowerCase" onclick="myfilter.set_ignore_case(!this.checked)" type="checkbox">
Case-sensitive

</p></form>



</body></html>
分享到:
评论

相关推荐

    下拉框带模糊查询引入select2组件.zip

    Select2是一款强大的jQuery插件,它提供了丰富的自定义选项和优化的用户体验,包括搜索过滤(模糊查询)、多选、分页等功能,极大地提升了下拉框的可用性。 标题"下拉框带模糊查询引入select2组件"指的是将Select2...

    layui-多选下拉框-xm-select-demo源码

    《layui-多选下拉框-xm-select:前端开发中的高效解决方案》 在现代Web开发中,用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库,成为了众多开发者青睐的选择。尤其在构建多选...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    多选下拉框的基本结构通常包括一个隐藏的`&lt;select&gt;`元素和一组可见的`&lt;label&gt;`与`&lt;input type="checkbox"&gt;`。每个`&lt;label&gt;`包裹一个`&lt;input&gt;`,并与其关联一个`&lt;option&gt;`,通过`for`属性链接`&lt;input&gt;`与`&lt;option&gt;`...

    select下拉框添加搜索功能

    在网页开发中,`select`下拉框是常见的用户交互元素,用于提供一系列选项供用户选择。然而,随着用户体验需求的提升,单纯的下拉选择已无法满足所有场景,特别是当选项众多时。为了提高用户的操作效率,我们常常需要...

    下拉框(select),可以多选,带有分组搜索功能

    在前端开发中,下拉框(Select)是用户界面中常见的一种交互元素,用于提供一组可选项供用户选择。在本场景中,我们讨论的是一个具有特定增强功能的下拉框,它支持多选、分组以及搜索功能。这样的组件在处理大量数据...

    一款非常好看下拉框样式(select)

    在网页设计中,美观的界面元素能够极大地提升用户体验。标题提到的“一款非常好看下拉框样式(select)”正是为了改善传统HTML `&lt;select&gt;` 元素的视觉效果。在这个项目中,开发者通过引入一个名为 `selectBox.htc` 的...

    jQuery手机下拉框select

    `jQuery手机下拉框select` 主要关注于改善移动端的用户体验,通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery Mobile Select Menu jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的...

    bootstrap select树形下拉框

    要使用Bootstrap Select树形下拉框,首先确保已经引入了Bootstrap和Bootstrap Select的CSS和JavaScript文件。这些文件可以从Bootstrap官网或者CDN获取。同时,可能还需要引入一个专门处理树形结构的库,如jQuery ...

    bootstrap-select 下拉框demo(含多种样式)

    bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...

    为select下拉框添加滚动条

    当下拉菜单选项比较多的时候,select下拉列表内容过多,在IE中默认是30条选项,firefox默认是20条, 超过自动出现滚动条,但是在没出现滚动条时候样式特别不...本次上传的代码将提供一种方法将select下拉框添加滚动条

    下拉框多选select多选

    在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`&lt;select&gt;`元素通常用于创建这样的下拉菜单,但默认情况下,`&lt;select&gt;`只支持单选。...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    一个简单的多选下拉框可以通过在`&lt;select&gt;`标签中添加`multiple`属性来创建: ```html &lt;select multiple&gt; &lt;option value="option1"&gt;Option 1 &lt;option value="option2"&gt;Option 2 &lt;option value="option3"&gt;Option ...

    layui多选下拉框样式,整套layui-select-multiple

    "layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先,我们来看“layui多选下拉框样式”这一知识点。Layui的多选下拉框在视觉上非常整洁,其设计遵循了扁平化和简洁化的理念,与现代...

    jQuery下拉框美化插件selectList.rar

    总结来说,"jQuery下拉框美化插件selectList"是提升网站用户体验的一个有效工具,它通过简单的API和丰富的定制选项,使开发者能够快速创建出美观且功能强大的下拉框组件。无论是个人项目还是企业级应用,selectList...

    select 下拉框可以多选

    当我们需要让用户从一组选项中选择一个或多个项目时,`select`下拉框是常用的选择方式。在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所...

    字符过滤下拉框

    在IT行业中,字符过滤下拉框是一种常见的交互元素,它被广泛应用于各种用户界面设计,尤其是在数据检索和选择场景中。这种控件结合了输入框和下拉菜单的功能,允许用户在输入文字的同时,根据输入内容实时筛选下拉...

    下拉框、下拉控件之Select2内含css和js

    **下拉框与下拉控件:Select2详解** 在网页设计中,下拉框(Dropdown)是一种常见的用户界面元素,用于提供多个选项供用户选择。然而,原生的HTML `&lt;select&gt;` 标签功能相对有限,样式单一,无法满足现代网页设计的...

    可进行输入编辑的select下拉框

    下拉框选择已有固定value,也可以选择后进行编辑,也可以直接输入数值。

    搜索功能select下拉框实现自动匹配

    带搜索功能的select下拉框,类似百度google的搜索框,自己匹配,很好用

Global site tag (gtag.js) - Google Analytics