add values to textbox history without submitting the form using javascript or Jquery

Question

Hello friends I have a <input type="text" id="tempID" /> element in my form

I also have an <input type="button" onclick="doSomething()" /> element in my form.

I want to add the text box value to textbox history when user clicks on the button.

I am processing the request using Jquery ajax. So I have to do it with javascript or Jquery.

Is this possible to add values to the history of particular <input type="text" /> element using javascript/Jquery..??

Answer 1

Here is how you can do it using HTML5 LocalStorage

$( "#tempID" ).autocomplete({
  source: function( req, resp ) {

    var temp = localStorage.getItem('custom_history');  

    var data = JSON.parse(temp);
    resp( data );

}
});


$('#tempID').on('blur', function() {
    var temp = localStorage.getItem('custom_history');  

    var data = JSON.parse(temp); 
    if($.trim(this.value).length > 0)
       data.push(this.value);

    localStorage.setItem('custom_history', JSON.stringify(data)); 

});

What I am doing is Setting the value into HTML5 Local storage when users moves away from the input field, clicks somewhere else.

Then retrieving that and setting that as source for jQuery UI auto complete.

Here is a working fiddle http://jsfiddle.net/joycse06/EBduF/173/

Enter some value. Click somewhere else. Click back again and add other values. The refresh the fiddle and start typing one of those and auto complete will show up.

UPDATE

Based on his comments and later chat the final code he need is this, I am pasting in if it might someone else later

// if we dont set this line then ff will return null, and null.length will throw an error
if(!localStorage.getItem('custom_history'))
        localStorage.setItem('custom_history','');
 $( "#test" ).autocomplete({
    source: function( req, resp ) {
      var term = req.term;
      var temp = localStorage.getItem('custom_history');  
        var data = [];
        if(temp.length > 0)
           data = JSON.parse(temp);
       var intRegex = /^\d+$/; 
       data = $.map(data,function(val){
                if(intRegex.test(val)){
                   if(val.indexOf(term) != -1) 
                        return val;
                   else
                        return null;
                }
                else
                    return null;
             });
      resp( data );

    }
});


$('#save').on('click', function() {
    var temp = localStorage.getItem('custom_history'); 

      var data = [];
      if(temp.length > 0)
        data = JSON.parse(temp); 
      var value = $.trim($('#test').val());
      if(value.length > 0){
         if($.inArray(value,data) != -1){
             //alert('Duplicate'); 
             return;
         }

      }
      data.push(value);
      localStorage.setItem('custom_history', JSON.stringify(data)); // set item to localStorage
});