The jQuery keyup filter is functioning properly when the content is displayed in columns, but it is not working as expected when the

Encountering an issue where the boxes do not reset properly to a 2x4 layout after typing something into the input field (for example, "spore") and then deleting it. It seems to work when the boxes are placed into 4 columns, but when using float: left on #sortables, the reset does not function as expected.

Here is a working fiddle with columns: http://jsfiddle.net/SkQPZ/1

And here is a fiddle that does not work with float: left: http://jsfiddle.net/4pBFu/. I am looking to resolve this issue in the second fiddle.

Below is my jQuery code:

    (function ($) {
jQuery.expr[':'].Contains = function (a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

function listFilter(gamefilter, list) {
    var form = $("<form>").attr({
        "class": "filterform",
            "action": "#"
    }),
        input = $("<input>").attr({
            "class": "filterinput",
            "type": "text",
            "placeholder": "Filter"

        });

    $(form).append(input).appendTo(gamefilter);
    $(input).change(function () {
        var list = $("#sortable");
        var filter = $(this).val();
        console.log(filter.length);
        if (filter.length > 0) {
            $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
            $(".number").hide();
            $(".numberstwo").hide();

        } else {
            console.log($(".number"));
            $(".number").show();
            $(".numberstwo").show();
            $(list).find("a").parent().slideDown();
        }
        return false;
    }).keyup(function () {
        $(this).change();

    });
}
$(function () {
    listFilter($("#gamefilter"), $("#sortable"));

});
}(jQuery));

Answer №1

I'm not quite sure what your end goal is, but I made some changes to your malfunctioning jsfiddle to see if this is what you had in mind.

http://jsfiddle.net/abc123/5/

Basically, I included this line within the if statement to show items that match the filter criteria after removing certain text.

$(list).find("a:Contains(" + filter + ")").parent().show();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to Send Messages through HTML Email Form

I have recently obtained a Bootstrap website template and I am facing an issue with the functionality of the form that is supposed to send messages to my email. Despite filling in all the required fields, the message confirms submission but no actual email ...

Access the properties of a JSON object without specifying a key

I am dealing with a collection of JSON arrays structured like this: [ { team: 111, enemyId: 123123, enemyTeam: '', winnerId: 7969, won: 1, result: '', dat ...

Performing multiple AJAX requests in parallel using jQuery to communicate with an Express server

I have been using the following code to send 10 ajax requests to a server and receive a response from Express: for(i=0;i<3;i++){ $.ajax({ url: "http://myserver.ca:3000/json", dataType: "jsonp", data: { reqType ...

Alpha 4.0.3 Bootstrap Carousel with Shadow

Hello there, I've been tinkering with the bootstrap website and I'm looking to add an inset shadow effect to the carousel. Here's a snippet of the HTML: <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

What is the best way to customize the columns of a Bootstrap card?

Utilizing the card-columns class from Bootstrap 4 to create a page for my portfolio. Everything is functioning well, but I desire to enhance the appearance to make it more appealing. https://i.sstatic.net/pJTxS.jpg This is the current design I have imple ...

Although the CSS3 Mobile Multilevel Menu is functioning, it is currently unable to display the second level of the

Hi there! I am currently working on a CSS3 vertical menu for a mobile webpage. While the first level of the menu is functioning correctly, the same cannot be said for the second level. It seems to always show up on mouseover, despite my numerous attempts t ...

What is the process for updating a field within an array in MongoDB by pushing the element if it does not already exist, and updating it if it does already exist

In the process of developing an IT ticketing system, a situation arises where notifications must be sent to users following a ticket whenever a new comment or note is added. The current code successfully adds a new ticket to the list of followed tickets ...

Is there a way for me to produce a random choice depending on the option selected by the user in the <select> menu?

As a beginner in JavaScript, I am attempting to create a feature where users can select a genre from a dropdown list and receive a random recommendation from that genre displayed on the screen. In essence, my goal is to allow users to get a random suggest ...

What is the method for extracting latitude and longitude values individually from JSON data?

Upon receiving the JSON response from the Google Maps API stored in a variable named 'obj', I noticed that alerting obj.name returns "Pancakes on the Rocks". To access the icon, I can use obj.icon. However, I am struggling to retrieve separate va ...

Expanding the SimpleModal container size

I recently implemented the SimpleModal plugin on my website. However, I encountered an issue with resizing the modal dialog box. Specifically, after clicking 'Yes' on a confirm dialog, the modal becomes small. The other challenge I am facing is ...

Is there an error when iterating through each table row and extracting the values in the rows?

Here is a basic table that I am attempting to iterate through in order to retrieve the value of each cell in every row where there are <td>s present. However, I encounter an error indicating that find does not exist despite having added jQuery. Any ...

Using Vue.js to mark a checkbox as selected

I've searched extensively and tried various combinations, but I'm unable to initialize my checkboxes as checked. For example: <ul class="object administrator-checkbox-list"> <li v-for="module in modules"> <label v-bin ...

Rearrange the characters within the variable before inserting them after

I'm currently dealing with an external system that generates outdated code, however, I do have access to css and javascript. The specific issue at hand involves working with a table that displays each item on a separate row, sometimes resulting in up ...

Animate css style using setTimeout: "in the blink of a moment"

I need help creating a bar (#innerBar) that decreases in width by 1% every second. Unfortunately, the loop I implemented is not working as expected. The bar goes from 100% to 0% almost instantaneously. function timer(){ var timer; for(i=100;i&g ...

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...

AngularJS ng-switch-trigger enclosed within its own ng-switch-wrapper

In my current project, I am working on switching between two buttons that act as their own triggers for the switch. To illustrate further: <span ng-switch on="patientSwitch"> <span ng-switch-when="edit"> <button ng-click="patien ...

What are the limitations on cross-site scripting for local (file:///) pages?

I am currently working on an HTML/Javascript application that makes use of jQuery to communicate with a web server that I unfortunately do not have control over. The application runs smoothly when accessed locally through the file:///app.html URL on Safari ...

What sets React$Element apart from ReactElement?

Attempting to implement flow with ReactJS and needing to specify types for prop children. The article on Flow + React does not provide any information. Despite encountering examples using ReactElement (e.g), I received an error message from flow stating i ...

Clicking on the Jquery datepicker beforeShowDay remains possible despite all days being set as not selectable

https://i.sstatic.net/P3mII.png I've been using jQuery UI for datepicker and I'm attempting to disable certain dates. I read that this can be done using beforeShowDay when initializing the datepicker, but I'm having trouble getting it to wo ...