Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
2
rated 0 times [  9] [ 7]  / answers: 1 / hits: 73511  / 11 Years ago, thu, april 25, 2013, 12:00:00

I want to implement a kind of jQuery live search.
But before sending the input to the server I'd like to remove all items in my array which have 3 or less characters (because in the german language, those words usually can be ignored in terms of searching)
So [this, is, a, test] becomes [this, test]



$(document).ready(function() {
var timer, searchInput;
$('#searchFAQ').keyup(function() {
clearTimeout(timer);
timer = setTimeout(function() {
searchInput = $('#searchFAQ').val().match(/w+/g);
if(searchInput) {
for (var elem in searchInput) {
if (searchInput[elem].length < 4) {
//remove those entries
searchInput.splice(elem, 1);
}
}
$('#output').text(searchInput);
//ajax call here
}
}, 500);
});
});


Now my problem is that not all items get removed in my for loop.
If I for example typ this is a test is gets removed, a stays.
JSFIDDLE



I think the problem is the for loop because the indexes of the array change if I remove an item with splice, so it goes on with the wrong index.



Perhaps anybody could help me out?


More From » jquery

 Answers
14

Solution 1



You can loop backwards, with something like the following:



var searchInput, i;

searchInput = [this, is, a, test];
i = searchInput.length;
while (i--) {
if (searchInput[i].length < 4) {
searchInput.splice(i, 1);
}
}


DEMO: http://jsfiddle.net/KXMeR/



This is because iterating incrementally through the array, when you splice it, the array is modified in place, so the items are shifted and you end up skipping the iteration of some. Looping backwards (with a while or even a for loop) fixes this because you're not looping in the direction you're splicing.






Solution 2



At the same time, it's usually faster to generate a new array instead of modifying one in place. Here's an example:



var searchInput, newSearchInput, i, j, cur;

searchInput = [this, is, a, test];
newSearchInput = [];
for (i = 0, j = searchInput.length; i < j; i++) {
cur = searchInput[i];
if (cur.length > 3) {
newSearchInput.push(cur);
}
}


where newSearchInput will only contain valid length items, and you still have the original items in searchInput.



DEMO: http://jsfiddle.net/RYAx2/






Solution 3



In addition to the second solution above, a similar, newer Array.prototype method is available to handle that better: filter. Here's an example:



var searchInput, newSearchInput;

searchInput = [this, is, a, test];
newSearchInput = searchInput.filter(function (value, index, array) {
return (value.length > 3);
});


DEMO: http://jsfiddle.net/qky7D/






References:




[#78627] Wednesday, April 24, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
devane

Total Points: 451
Total Questions: 88
Total Answers: 100

Location: India
Member since Wed, Aug 26, 2020
4 Years ago
;