jquery实现简单搜索$("p:contains()")

author author     2022-09-03     546

关键词:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>contains</title>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="search">
    <button id="sub">搜索</button>
    <table width="100%" border=1>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>地区</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>[email protected]</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>[email protected]</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>3</td>
            <td>张五</td>
            <td>女</td>
            <td>[email protected]</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵四</td>
            <td>男</td>
            <td>[email protected]</td>
            <td>深圳</td>
        </tr>
    </table>
</body>
<!-- <script></script>放在body的后面,但是它会自动地放到body的里面 -->
<script src="./js/a1.js">
$("#sub").click(function() {
    var val = $("#search").val(); // 获取搜索词

    if (val.length > 0) {
        $("tr:not(:first)").hide(); // 除了第一行外的所有行隐藏
        $("tr:contains(" + val + ")").show(); // 包含搜索词的行显示
    } else {
        $("tr").show();
    }
});
</script>
</html>

 

jquery实现简单前端搜索功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>工程轻量化与可靠性技术实验室</title></head><body><divclass="content-right"><inputtype="text"&g 查看详情

怎么做百度搜索的下拉框?

1、实现该功能需依赖jquery.js,jquery.autocomplete.js,先引入这两个js包,以及jquery.autocomplete.css样式文件,如图所示。2、该不全插件要结合input元素使用,也就是在input中进行搜索时,会达到自动提示补全的效果,在html文件中定义inp... 查看详情

如何用jquery实现并且搜索a标签时要用find方法怎么实现

给页面中id为abc的div绑定一个click事件,让他将页面中所有类别为back的标记的边框设置为红色,2个像素的宽度,操作完后,进一步搜索a标签,设置他们的内容为:"友情链接"参考技术A<!DOCTYPEHTML><html><head><title>yugi... 查看详情

php+jquery+ajax简单实现页面异步刷新

页面显示如下:JQueryAjax.html中的代码如下(用的较为简单的$.post)<html><head><metacharset="UTF-8"><title>JQueryAjax+PHP</title><scripttype="text/javascript"src="htt 查看详情

如何用jquery实现搜索到的关键字标红显示?

参考技术A代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery.js" ></script><script>$(function()toRed("我是&... 查看详情

django博客实现简单的全文搜索(代码片段)

...返回给用户。整个过程就是这样,下面来看看Django如何用实现这些过程。将关键词提交给服务器先来回顾一下我们的Django博客的Post(文章)模型:blog/models.pyclassPost(models.Model):#标题title=models.CharField("标题",max_length=70)#正... 查看详情

jquery中的ajax问题

postajax方法的区别jquery的post是ajax的简化版本,$.ajax是jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。简单易用的高层实现见$.get,$.post等。主要是为了方便简化ajax的使用而设计的.这是一个简单的POST请求功能以取代复杂$.ajax... 查看详情

jquery实现数字加减效果汇总

参考技术A我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数。左右加减数字像京东提... 查看详情

如何用jquery实现搜索到的关键字标红显示

先将就这么用下:<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>      ... 查看详情

jquery怎么实现双向数据绑定

  用jquery实现的简单数据双向绑定:  functionDataBinder(object_id)varpubSub=jQuery();vardata_attr="bind-"+object_id,message=object_id+":change";jQuery(document).on("change","[data-"+data_attr+"]",function(evt)var$input=jQuery(this);... 查看详情

jquery-明文搜索

simplejquerycodetoclearformfields//clearinputfield$("input").focus(function(){ $("input").attr("value","");}); 查看详情

搜索自动提示的简单模拟jquery

使用jQuery实现类似于百度搜索时的自动完成功能,界面效果所示。首先在输入框上注册keyup事件,然后在事件中通过AJAX获取JSON对象。取得数据后,每一项数据创建一个li标签,在标签上注册click事件,这样当我们点击每一项的时... 查看详情

搜索框实现模糊查询方法-js

...的元素进行检索并查询出所需的结果,通过如下方式简单实现了一个小的模糊查询,具体如下:首先,用到了两个方法1.对数组通过filter的方式遍历查询搜索的key2.对遍历出的结果进行字符串的模糊查询str.indexOf("xxx")!=-1其... 查看详情

一个简单的extjs搜索建议框

封装的是一个Ext4.2的组件,继承并兼容于Ext的ComboBox.实现原理非常easy,在combo中监听keyup事件就可以.搜索建议的Combo.基本上全然兼容,使用方式与Combo下拉框一样.须要后台程序依据keyword进行搜索建议.源代码例如以下: //搜索建... 查看详情

jquery搜索文本替换

varsearchBox=$("#edit-search-theme-form-1");varsearchBoxDefault="Enterkeywords";searchBox.attr("value",searchBoxDefault); searchBox.focus(function(){if(jQuery.trim($(this).attr("value"))==search... 查看详情

求用jquery实现简单的增删改查,不要求界面,最好是增删改查各用一个js文件写,使用框架不限,上传项目

界面就一个简单的表,实体是学生信息,如姓名、性别、年龄之类的,不用弄太多属性,重点是实现过程参考技术AfunctionDeleteItemResourceMethod(lis)deletesn=lis;$.ajax(type:"POST",contentType:"text/html;charset=utf-8",url:'../../DeleteD... 查看详情

vbs怎么实现以下简单功能:

弹出一个输入框输入A,弹出一个对话框,显示B输入B,弹出一个对话框,显示C。。。(ABCD无相关性,可以是数值,也可以是文本)输入特殊字符*,则结束VBS,退出参考技术Ado while truet=inputbox("输入")if t="A&... 查看详情

小程序简单的搜索栏

参考技术A<!--pages/search/search.wxml--><van-search  value=" value "  placeholder="请输入搜索关键词"  show-action  input-align="center"  bind:search="onSearch"  bind:can... 查看详情