Home

JS special effects

jQuery effects

jQuery text box input text automatic filtering effect

jQuery text box input text automatically filter code

Download Now Preview

js code

<script type="text/javascript">
var personArr = [
    { name: 'Wanggang', src: 'img/3.png', des: 'Bad cervical vertebra', sex: 'm' },
{ name: 'Zhang San', src: 'img/4.png', des: 'Description information 2', sex: 'm' },
{ name: '李思', src: 'img/5.png', des: 'Description information 3', sex: 'm' },
{ name: 'Wang Mazi', src: 'img/1.png', des: 'Description information 4', sex: 'm' },
{ name: 'Ahai', src: 'img/2.png', des: 'Description information 5', sex: 'm' },
    { name: 'Liu Ying', src: 'img/5.png', des: 'Who am I', sex: 'f' },
    { name: 'Wang Xiuying', src: 'img/4.png', des: 'I'm very good-looking', sex: 'f' },
    { name: 'Liu Jinlei', src: 'img/1.png', des: 'You have never seen a strange face', sex: 'm' },
    { name: 'Liu Feixiang', src: 'img/2.png', des: 'Guapi Liu', sex: 'm' }
];
//Rendering function
function renderList(arr) {
    var str = "";
    arr.forEach(function (ele, index) {
        str += '<li>\
                   <img src = '+ ele.src + ' alt = "" >\
                   <p class="username">'+ ele.name + '</p>\
                   <p class="des">'+ ele.des + '</p>\
               </li > '
    })
    $("ul").html(str)
}
renderList(personArr)
//Render based on name
var searchVal = "";
var sexVal = "a";
$(".search-box").on("input", function () {
    searchVal = $(this).val();
    all()
})
//Render based on gender
$("span").on("click", function () {
    $("span").removeClass("active");
    $(this).addClass("active");
    sexVal = $(this).attr("sex");
    all()
})
//Filter the array by name
function nameFilter(name, arr) {
    return arr.filter(function (ele, index) {
        return ele.name.indexOf(name) != -1 ? true : false
    })
}
//Filter the array based on gender
function sexFilter(sex, arr) {
    if (sex == "a") {
        return arr;
    }
    return arr.filter(function (ele, index) {
        return ele.sex == sex;
    })
}
//Merge filter
function all() {
    var lastArr = nameFilter(searchVal, personArr);
    lastArr = sexFilter(sexVal, lastArr)
    renderList(lastArr)
}

</script>



A very simple jQuery text box input text automatic filtering code, query box text filtering list display code with pictures.

Disclaimer

All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn

Simple text box input automatic prompt_html/css_WEB-ITnose

24 Jun 2016

Simple text box input auto-suggestion

jQuery Add Default Text To Search Input Box

07 Mar 2025

Enhance your search box with jQuery: a simple yet effective guide! This tutorial demonstrates how to add default text to your search box, making it more user-friendly. The solution ensures the default text disappears on click, reappears when the box

CSS3 JQUERY page scrolling effect code_html/css_WEB-ITnose

24 Jun 2016

CSS3 JQUERY page scrolling effects code

58 jQuery simulated CSS3 transition page switching effects_html/css_WEB-ITnose

24 Jun 2016

58 jQuery simulated CSS3 transition page switching effects

jquery waterfall flow LightBox picture box special effects

06 Jul 2016

jquery waterfall flow LightBox picture box special effects

10 jQuery Cool Menu Effect Plugins

01 Mar 2025

10 cool jQuery menu special effects plug-ins to improve website user experience! We have shared many jQuery navigation menu plugins, and now we bring you 10 more amazing jQuery menu effects plugins. Enjoy it! Related readings: - 10 dazzling jQuery navigation menus - 15 excellent jQuery navigation menus Right-click menu This plugin is very easy to use and compact, allowing you to create right-click menus. Source Code Demo 2. jQuery Multi-level Menu – FX CSS Menu with Submenu 100% CSS menu, visual effects provided by jQuery. Only use Javascript to implement special effects. Fully compatible with cross-browser, package

8 Cool jQuery Animation Effects Tutorials

26 Feb 2025

jQuery animation effect tutorial: Say goodbye to Flash animation and embrace the era of jQuery animation! In the past, animation effects on websites usually rely on Flash. But now, with jQuery, you can easily create various animation effects. The following are some jQuery animation effects tutorials to help you start your journey of painting! Related readings: 10 CSS3 and jQuery loading animation solutions 3D JavaScript animation—three.js JQuery animation feed display imitating Foursquare This tutorial will show you how to easily create an RSS scrolling subtitle effect using jQuery. Source Code Demo jQue

How to Maintain jQuery Mouseover Effects in ASP.NET UpdatePanels?

03 Dec 2024

jQuery $(document).ready and UpdatePanels: A Refined LookWhen utilizing jQuery to apply mouseover effects to elements within an UpdatePanel, the...

10 Amazing Image Effects using jQuery

10 Mar 2025

Ten amazing jQuery image effects plugins to inject fashion into your website! With these jQuery image effects plugins, you can easily convert ordinary images on your website, enhance image effects, create galleries, scrollers, and make your website look new! Image segmentation effects combined with CSS and jQuery This tutorial will create an image segmentation effect. It's similar to a sliding door effect, where the image slides left or right, showing the text behind it, but the difference is that the effect looks like the image is split in half, one moves to the left and the other moves to the right. Source jQuery Image Distortion Script ImageWarp adds interesting twist effects to selected images on the page

See all articles

Hot tools Tags

PHP editors

Development tools

PHP IDE

PHP framework

PHP debugging tools

PHP extensions

Hot Tools

jQuery2019 Valentine's Day Confession Fireworks Animation Special Effects

A very popular jQuery Valentine's Day confession fireworks animation special effect on Douyin, suitable for programmers and technical geeks to express their love to the girl they love. No matter you choose to be willing or not, you have to agree in the end.