добавить значения в текстовое поле, историю без отправки формы с помощью JavaScript или Jquery

Question

Привет друзья У меня есть <input type="text" id="tempID" /> элемент в моей форме

У меня также есть <input type="button" onclick="doSomething()" /> элемент в моей форме.

Я хочу добавить значение текстового поля в историю текстовых полей, когда пользователь нажимает кнопку.

Я обрабатываю запрос, используя JQuery ajax. Поэтому я должен сделать это с помощью javascript или JQuery.

Можно ли добавить значения к истории конкретного элемента <input type="text" /> с помощью javascript/Jquery .. ??

Answer 1

Вот как вы можете сделать это с помощью 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)); 

});

Что я делаю Установка значения в HTML5 Локальное хранилище, когда пользователи удаляются от поля ввода, щелкает в другом месте.

После этого извлечение этого и установка этого в качестве источника для пользовательского интерфейса jQuery завершена.

Вот рабочая скрипку http://jsfiddle.net/joycse06/EBduF/173/

Введите некоторое значение. Нажмите еще где-нибудь. Нажмите еще раз и добавьте другие значения. Обновится скрипка и начнется ввод одного из них и автозаполнения.

UPDATE

Основываясь на своих комментариях, а затем чат окончательный код, он должен быть в этом, я вставляя, если это может кто-то позже

// 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 
}); 

Answer 2

Вы можете использовать localStorage как следующее:

var arr = []; 
$('input#tempID').on('click', function() { 
    arr.push(this.value); 
    localStorage.setItem('history', JSON.stringify(arr)); // set item to localStorage 
}); 

Чтобы получить это значение попробовать,

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

if(retarr) { // checking that data it stored in localStorage or not, if not exists temp = null 
    var allHistories = JSON.parse(temp); // now you have history 
    console.log(allHistories); 
} 

Я думаю, что нужно что-то вроде autocomplete