How to work with arrays using jquery

Question

I'm creating a search bar using jQuery and my code is pasted below

Fiddle : https://jsfiddle.net/fpLf1to4/

var inputSearch = $('.searchInput').hide(); 
var searchArray = ['s','e','a','r','c','h'];
var searchReturn = '';
$('#search').on('click', function(){
 $(inputSearch).fadeToggle(500).focus();
 for(var i = 0 ; i < searchArray.length ; i++){
 searchReturn = searchReturn + searchArray[i];
 } 
 $(inputSearch).attr('placeholder', searchReturn[0]);
});

Note : now I'm using only the first index of the array for my input attribute.

$(inputSearch).attr('placeholder', searchReturn[0]);

Now after every one second I want my attr() to be updated like

$(inputSearch).attr('placeholder', searchReturn[0] + searchReturn[1]);

and the very next second

$(inputSearch).attr('placeholder', searchReturn[0] + searchReturn[1] + searchReturn[2]);

and so on ...

• Lorenz Meyer: Use setTimout to add the following letters

Answer 1

You have to use setInterval function, instead of for loop. Here is how you can do it:

$('#search').on('click', function(){
 $(inputSearch).fadeToggle(500).focus();
 var i = 0; 
 var interval = setInterval(function() { 
 searchReturn = searchReturn + searchArray[i]; 
 $(inputSearch).attr('placeholder', searchReturn);
 if(i == searchArray.length - 1) {
 clearInterval(interval) 
 }
 i++;
 }, 2000); 
 });

And here is the fiddle: https://jsfiddle.net/fpLf1to4/1/

Answer 2

Try utilizing .queue() , setTimeout

 var inputSearch = $('.searchInput').hide();
 var searchArray = ['s', 'e', 'a', 'r', 'c', 'h'];
 $('#search').on('click', function() { 
 inputSearch.queue("s", [])
 .attr("placeholder", "")
 .fadeToggle(500).focus()
 .queue("s", $.map(searchArray, function(value) {
 return function(next) {
 $(this).attr("placeholder", function(_, p) {
 return p === undefined ? value : p + value
 });
 setTimeout(next, 1000)
 }
 })).dequeue("s")
 });

jsfiddle https://jsfiddle.net/fpLf1to4/5/

Answer 3

Is this what you wanted? You can change the timeout if you want execution to be faster or slower.

var inputSearch = $('.searchInput').hide(); 
var searchArray = ['s','e','a','r','c','h'];
var searchReturn = '';
$('#search').on('click', function(){
 $(inputSearch).fadeToggle(500).focus();
 updateSearch(); 
});
var currentIdx = 0;
function updateSearch() {
 var placeholder = $(inputSearch).attr('placeholder')
 if (placeholder === undefined) {
 placeholder = "";
 }
 placeholder += searchArray[currentIdx];
 $(inputSearch).attr('placeholder', placeholder);
 currentIdx++;
 if (currentIdx >= searchArray.length) {
 return;
 }
 setTimeout(updateSearch,500);
}

https://jsfiddle.net/fpLf1to4/6/

• Alexandr Lazarev: Update your fiddle link.