CODEWITHSUNDEEP
javascriptjqueryarrays
Daniel
Daniel

Reputation: 1466

How to work with arrays using jquery

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

Upvotes: -1

Views: 66

Answers (3)

Cornel Damian
Cornel Damian

Reputation: 733

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/

Upvotes: 1

guest271314
guest271314

Reputation: 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/

Upvotes: 1

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12862

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/

Upvotes: 1

Related Questions