开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery mobile使用像select这样的input - ul - li来过滤动态结果

jQuery Mobile是一个基于HTML5的移动应用开发框架，它提供了丰富的UI组件和交互效果，使开发者能够快速构建跨平台的移动应用。在jQuery Mobile中，可以使用像select这样的input-ul-li来过滤动态结果。

这种输入-无序列表-列表项的结构通常被称为“过滤列表”（Filterable List），它允许用户通过输入关键字来动态过滤列表中的结果。在jQuery Mobile中，可以通过以下步骤来实现这个功能：

创建一个输入框（input）作为过滤器，让用户输入关键字。
创建一个无序列表（ul）作为列表容器，用于展示动态结果。
使用列表项（li）来表示每个结果项。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Filterable List</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Filterable List</h1>
        </div>
        <div data-role="content">
            <input type="text" id="filter" placeholder="Enter keyword">
            <ul data-role="listview" data-filter="true" data-input="#filter">
                <li>Result 1</li>
                <li>Result 2</li>
                <li>Result 3</li>
                <li>Result 4</li>
                <li>Result 5</li>
            </ul>
        </div>
    </div>
</body>
</html>

在上面的示例中，我们使用了jQuery Mobile提供的data-filter属性来启用过滤功能，并通过data-input属性指定了过滤器的目标输入框。

这样，用户在输入框中输入关键字时，列表会根据输入的内容动态过滤显示结果。用户可以通过滑动列表或点击过滤结果来进行交互。

推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mpp）

腾讯云移动开发平台提供了丰富的移动应用开发工具和服务，包括移动应用开发框架、移动应用测试、移动应用分析等，可以帮助开发者快速构建高质量的移动应用。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

学习jQuery？这篇文章就够了

ul> li> ul> LABEL1label> <input type...问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果 p> 问题 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果... $(function () { // 问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果 console.log($('ul li...label 元素后的 input 元素，并打印分析结果 console.log($('label + input')); }); script> 八、过滤选择器 1、定义过滤选择器...：通过特定的过滤规则来筛选所需要的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同。

12.2K1 0

在 jQuery Mobile 中使用 UI 组件

该列表被动态转换成悬停、静态和活动状态的水平导航栏，全都可以使用 jQuery Mobile 主题框架进行定制。清单 3....使用 jQuery Mobile 框架创建基本链接列表 List item 1 <a...您也可以通过使用图标、缩略图和计数泡泡来创建不同的视觉样式。您可以通过使用 ul-li-count 类，将计数泡泡添加到一个列表项（清单 9）。清单 9....Led Zeppelin Ten Years 您可以使用与添加缩略图一样的方法来添加图标；惟一的区别是您要使用 ui-li-icon...例如，如果您有一个员工姓名列表，并且您将一个搜索筛选器栏添加到该列表，用户就能够通过向搜索筛选器文本输入键入一个或多个字符，来筛选和缩小在该页面上显示的结果范围。

8K2 0

jquery jQuery快速入门

(a))")// 找到所有后代中不含a标签的li标签练习：自定义模态框，使用jQuery实现弹出和隐藏功能。...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的等价于 $("div.c1") 补充： .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素...、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件： $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时，它通常不需要显式地循环的 .each()方法：也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了： $("li").addClass("c1"); // 对所有标签做统一操作

16.1K5 0

day40_jQuery学习笔记_01

（常见应用：开发中的小图标，其实是一张图片，用css来定位，这样网站的请求就会减少） Prototype，是对js的扩展，做框架开发中使用。 YUI(Yahoo!...jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。...由美国人 John Resig 在2006年1月发布 jQuery 是免费、开源的 jQuery 的分类： WEB版本：我们主要学习研究用的 UI版本：集成了UI组件，做图形化页面的 mobile版本...、使用Ajax以及其他功能 jQuery能够使用户的html页面保持代码和html内容分离不用再在html里面插入一堆js来调用命令了，只需要定义id即可 jQuery提供API让开发者编写插件，有许多成熟的插件可供选择...()); // 3、将 jQuery对象转换成 js的dom对象 // 3.1、方式一：jQuery对象内部使用【数组】来存放所有的数据，可以通过数组的索引进行获取

6.6K2 0

用jQuery模拟select下拉框

很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。...这样就只能用 js + div 来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找，又重新发明轮子鸟:) CN 中文... <input type="text" id="txtSrc" onkeyup="fnTest()"...不足之处： 1、按键盘上下键时，没有高亮的自动移动 2、键入文字自动过滤结果时，感觉相对原生的select有些不自然

3.5K1 0

jQuery

3.jQuery 对象和 Dom 对象使用的区别 JQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 JQuery 对象的属性和方法 4.DOM 对象和 jQuery 对象互转... Button jQuery 代码： $(":input") 运行结果：...ul> // jQuery $("li").has("ul").css("background-color", "red"); 2.查找查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的... 22222 添加新的li // jQuery $("ul>li").click..."); }); // 运行结果 11111 1111111 111111111 11111111111<

10.8K2 0

02-老马jQuery教程-jQuery事件处理

绑定简单事件在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...= $('.input-box input'); // jQuery构造函数传入选择器，返回的是一个jQuery的包装对象 // 大部分的api都是在jQuery包装对象上 /...标签放到省的select下面 // jQuery的html方法已经对ie8的 select设置innerHTML的bug做了相关处理。...$("p").slideToggle(); }); 以后推荐大家使用on的方式上课代码： 1 2 <li...on的方式上课代码： 1 2</li

6.4K0 0

Web前端学习笔记之jQuery基础

(a))")// 找到所有后代中不含a标签的li标签练习：自定义模态框，使用jQuery实现弹出和隐藏功能。... </script...等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件： $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时，它通常不需要显式地循环的 .each()方法：也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了： $("li").addClass("c1"); // 对所有标签做统一操作

3.5K2 0

jQuery的基本操作

li> Ralph jQuery代码 $("ul li:first-child") 结果 [John,Glen] 　　...>55555 66666 jQuery代码 $("ul li:last-child") 结果 [33333,66666...44444 jQuery代码 $("ul li:only-child") 结果 [44444] 　　表单 input //概述 //匹配所有的...内容·和个函数不能用XML文档·但可以用于XHTML文档· //在一个HTML文档中,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素的HTML...ul> jQuery代码 $("li").last() 结果 [list item3] 　　has //概述 //检查当前的元素是否含有某个特定的类,如果有,则返回true

7.5K2 0

jQuery

)') $('ul li:first()')[0].innerText //1 //last $('ul li:last()') $('ul li').last() //eq $('ul li:eq(1...)') //even $('ul li:even()') //odd $('ul li:odd()') //gt $('ul li:gt(2)') //lt $('ul li:lt(2)') //not...).siblings();// 兄弟们 //find 等价于$("div p") $("div").find("p") //filter $("div").filter(".c1") // 从结果集中过滤出有...、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件： $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(

6.7K1 0

jQuery选择器大全(48个代码片段+21幅图演示)

L1 L2 L3 L4 L5 ——1.6 :header...可见性过滤选择器 ——3.1 :hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素，而不匹配...jQuery 其他 ——4.2 [attribute = value]和...要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。...表单对象属性过滤选择器 ——6.1 :enabled和:disabled（取可用或不可用元素） :enabled和:diabled的匹配范围包括input, select, textarea。 ?

5K8 0

前端学习之jQuery

DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的方法,卵用会报错约定：如果获取的是jQuery对象,那么在变量前面加上$ var $...).val()) }) 3.2 筛选器 3.2.1 过滤筛选器 $("li").eq(2) $('li').first() $("ul li").hasClass...//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。...('click');})就是筛选出ul下的li给其绑定 // click事件； [selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件；...);}方式绑定，然后动态添加 //li:$('ul').append('js new li');这个新生成的li被绑上了click事件 [data]参数的调用

3.2K1 0

jQuery基础

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错约定：如果获取的是 jQuery... 1 2 3 Add_li <button...//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。...只是结束了当前的函数,并不会影响后面函数的执行 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了, //希望后面的函数也不再执行了...) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）增加两个插件方法： <input

2.1K6 0

jQuery选择器大全

L1 L2 L3 L4 L5 ——1.6 :header（取H1~H6标题元素） $(document...可见性过滤选择器 ——3.1 :hidden（取不可见的元素） jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素...这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。...要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。...表单对象属性过滤选择器 ——6.1 :enabled和:disabled（取可用或不可用元素） :enabled和:diabled的匹配范围包括input, select, textarea。

5.1K1 0

Web阶段：第五章：JQuery库

3.JQuery流行程度 jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...Jquery 的初体验需求：使用Jquery和javascript给一个按钮绑定单击事件注意：使用Jquery之前要将第三方jar包导入 <!...jquery对象是一个Dom对象的数组 + jquery 的一系列功能函数的总和。 Jquery对象和Dom对象使用区别？...; 表单过滤器 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有文本输入框 :password 匹配所有的密码输入框 :radio... IOSAndroidWindows Phone

26.2K2 0

Jquery简介选择的

来获取option的值) 演示样例描写叙述:查找全部选中的复选框元素 HTML 代码: Gardens Trees jQuery 代码: $(“select option...ul> Glen Tane Ralph jQuery 代码: $(“ul li:nth-child(... jQuery 代码: $(“ul li:last-child”) 结果: [ Brandon, Ralph ] :only-child...> Glen jQuery 代码: $(“ul li:only-child”) 结果: [ Glen ] 版权声明：本文博主原创文章

1.6K2 0

jQuery

> $(":selected") // 找到所有被选中的option 筛选器方法（将来用的很多）　　选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签...、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。　　　　　　...想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件： $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时，它通常不需要显式地循环的 .each()方法：　　　　也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了： $("li").addClass("c1");

8.9K2 0

写一个问卷调查的功能（熟悉一下Array数组的操作以及对Radio的使用）

... <input...[type='radio']:checked + label:hover:after {color: #c733c5;} ul.select{margin-top:30px} ul.select li{...ok，这里细心的基本都可以看到我的js是写的不完整的，毕竟很多，这样的排列的组合是很多的，所以感兴趣的可以直接自己补充，他的预算次数是2的3次方，那么如果有五个选项九个页面的话那就是5的9次方，所以我是没有那么多的精力实现的

7612 0

jquery

(a))")// 找到所有后代中不含a标签的li标签练习：自定义模态框，使用jQuery实现弹出和隐藏功能。...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的等价于 $("div.c1") 补充： .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素...、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件： $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时，它通常不需要显式地循环的 .each()方法：也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了： $("li").addClass("c1"); // 对所有标签做统一操作

5.8K3 0

javaWeb核心技术第五篇之jQuery

(写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可...jquery对象, 使用js的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象...button" - input select textarea button - jQuery的DOM操作 - jQuery效果: - 基本:★ 高和宽都变化...案例3-表单校验需求分析: 通过使用validate插件来完成表单校验....">重庆反恐 <li id="xj" name="xingji

8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭