How to work with arrays using jquery

Question

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

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 ...

Use setTimout to add the following letters

Lorenz Meyer
– Lorenz Meyer

2015-09-06 11:28:22 +00:00
Commented Sep 6, 2015 at 11:28 — Lorenz Meyer
– Lorenz Meyer, Commented Sep 6, 2015 at 11:28

Alexandr Lazarev · Accepted Answer · 2015-09-06 11:36:05Z

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/

answered Sep 6, 2015 at 11:36

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2015-09-06 12:34:44Z

1

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/

edited Sep 6, 2015 at 12:34

answered Sep 6, 2015 at 12:10

guest271314

1

Comments

Cornel Damian · Accepted Answer · 2015-09-15 23:22:11Z

1

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/

edited Sep 15, 2015 at 23:22

answered Sep 6, 2015 at 11:40

Cornel Damian

7338 silver badges11 bronze badges

1 Comment

Alexandr Lazarev Over a year ago

Update your fiddle link.

Collectives™ on Stack Overflow

How to work with arrays using jquery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related