在不使用javascript或Jquery提交表单的情况下向文本框历史记录添加值

时间:2012-05-18 08:25:16

标签: javascript jquery textbox browser-history

朋友您好我的表单中有<input type="text" id="tempID" />元素

我的表单中也有一个<input type="button" onclick="doSomething()" />元素。

我想在用户点击按钮时将文本框值添加到文本框历史记录中。

我正在使用Jquery ajax处理请求。所以我必须使用javascript或Jquery。

是否可以使用javascript / Jquery将值添加到特定<input type="text" />元素的历史记录中。??

2 个答案:

答案 0 :(得分:2)

以下是使用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 UI自动完成的源。

这是一个工作小提琴http://jsfiddle.net/joycse06/EBduF/173/

输入一些值。点击其他地方。再次单击返回并添加其他值。刷新小提琴并开始输入其中一个并自动完成将显示。

<强>更新

基于他的评论并稍后聊聊他需要的最终代码就是这个,如果以后可能是其他人,我会粘贴

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

答案 1 :(得分:0)

您可以使用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

这样的东西