jQuery列表检索功能实现代码

2024-02-23 14:09:11

先给大家展示下效果图：

这是一个简单的列表右上角有一个检索功能我们要实现的是列表检索功能是用的jquery实现的具体代码如下

$(function(){
      $("input[type=button]").click(function(){
        var txt=$("input[type=text]").val();
        if($.trim(txt)!=""){
          $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
        }else{
          $(".ggsm_list li").show();
        }
      });
    });

给按钮一个点击事件，首先获取到input中的值，然后让span的其它父元素都隐藏(其实就是隐藏掉其它的li标签)然后查找含有txt(就是input中值)的那一个li，然后显示出来

$("#textInput").on("keypress", function (e) {
        if (e.charCode === 13) {
          var txt=$("input[type=text]").val();
          if($.trim(txt)!=""){
            $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
          }else{
            $(".ggsm_list li").show();
          }
        }

这个代码是对键盘回车键做的一个优化(代码不多很简单)

以上所述是小编给大家介绍的jQuery列表检索功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jQuery数据检索中根据关键字快速定位GridView指定行的实现方法

本文实例讲述了jQuery数据检索中根据关键字快速定位GridView指定行的实现方法.分享给大家供大家参考,具体如下: 运行截图如下: 具体代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowGridviewContent.aspx.cs" Inherits="ShowGridviewContent" %> <!DOCTYPE
php+mysql+jquery实现简易的检索自动补全提示功能

本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下: 这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作. html+jQuery内容: <html> <head> <style type="text/css"> #autoBox { marg
jQuery列表检索功能实现代码

先给大家展示下效果图: 这是一个简单的列表右上角有一个检索功能我们要实现的是列表检索功能是用的jquery实现的具体代码如下 $(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]").val(); if($.trim(txt)!=""){ $(".ggsm_list li span").parent().h
微信小程序中的列表切换功能实例代码详解

感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下:  <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<
基于jquery循环map功能的代码

废话少说,看代码复制代码代码如下: var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族","维吾尔族"] }; $.each(map,function(key,values){ console.log(key); $(values).each(function(){ console.log("\t" + this); }
利用VUE框架，实现列表分页功能示例代码

先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面: 2. 点击单左/单右,向后/向前跳转一个页面: 3. 点击双左/双右,直接跳转到最后一页/第一页: 4. 一次显示当前页面的前三个与后三个页面: 5. 始终显示最后一个页面: HTML:  <div class="u-pages" style="margin-bottom:20px; margin-top:10px;"> <ul> <
jQuery zTree搜索-关键字查询递归无限层功能实现代码

唠叨一哈前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句"找不到是不可能的啊,肯定有很多人早做了无数了,找不到我给你写还请你恰午饭",然而我也去找了很久也没有找到(泪崩,我的计划,我的午饭~).绝大多数都是用的API里面的getNodesByParamFuzzy()或者高亮之类的.然而朋友表示需求不符合:1. 匹配失败父节点也隐藏:2.能自定义匹配规则,即
js、jquery实现列表模糊搜索功能过程解析

实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键时则会选中列表项 5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏 6. 点击文本框外部时自动隐藏下拉框先来预览一下效果吧! 列表中包含的列表项有: 北京.上海.杭州.安庆.大兴安岭.安阳.广州.贵阳.哈尔滨.合肥.邯郸.呼伦贝尔.淮南.黄山.济南.济宁.嘉兴.南昌.南通.南宁.南京在预览
jQuery实现下拉加载功能实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(docum
jQuery窗口拖动功能的实现代码

具体代码如下所示: $("#showTitle").mousedown(function (e) { vbool = true; vHeight = e.pageY; vWidth = e.pageX; cHeight = vHeight - $("#show").offset().top; cWdith = vWidth - $("#show").offset().left; //alert("divshow" + $(&q
jquery中实现简单的tabs插件功能的代码

言归正传,以下是全文. 先附上两张最简单的效果图. 首先编写简单的HTML代码.用作tabs的UL标签和包含内容的p标签. <ul><li><a href="#first">海阔天空</a></li><li><a href="#second">光辉岁月</a></li><li><a href="#third">真的爱
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码

心血来潮想为自己的小项目做一个提醒系统,譬如私信,评论等消息都能及时传递过来.由于道行尚浅,网上那些长轮询对于我略微复杂,于是觉得还是自己写一写试试比较好. 我的思路是,单独在数据库中建一个提醒表,表主要由接收者的id和消息类型两个字段组成 /* 前台提醒表 */ CREATE TABLE IF NOT EXISTS notification( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -- 主键自增 mid INT NOT NULL DEFAULT

jQuery列表检索功能实现代码

相关推荐

随机推荐