In this html there is the search field, where I type the names of the teams.
There is the option to save the team as default, but I would like to leave the name already saved, every time I open the page it already open looking for the automatic team ...
The Archive is on my desktop, so the idea was to leave several copies of various teams here with me, to do the tests follow some teams that can be launched in this field: Ice Blood , Renascitur , JPHS and Fitnns .
I could not see your example, but you can use IndexedDB. for this you can store your filter in IndexedDB in the following format:
{
id: "<inteiro auto-incremental>"
timeA: "<nome do time A>",
timeB: "<nome do time B>",
selected: true/false
}
To create the database in IndexedDB, do the following:
var dbName = "filtros";
var db = null;
var request = indexedDB.open(dbName);
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(dbName, { keyPath: "id", autoIncrement: true });
objectStore.createIndex("times", ["timeA", "timeB"], { unique: true });
objectStore.createIndex("selected", "selected", { unique: false });
};
request.onsuccess = function(event) {
db = request.result;
}
Here is an example of basic operations with IndexedDB:
Catch All Records:
var objectStore = db.transaction(dbName).objectStore(dbName);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
var id = cursor.key;
var filtro = cursor.value
cursor.continue();
}
};
Paste Registration by ID:
var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.get(id)
request.onsuccess = function(event) {
var filtro= request.result;
};
Insert Registry:
var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.add(filtro)
request.onsuccess = function(event) {
filtro.id = event.target.result;
};
Update Registry:
var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.put(filtro)
request.onsuccess = function(event) {
//registro atualizado.
};
Once this is done, you will have full control over the saved records. Here is a complete example:
var filtros = document.getElementById("filtros");
var filtro = document.getElementById("filtro");
var timeA = document.getElementById("timeA");
var timeB = document.getElementById("timeB");
var salvar = document.getElementById("salvar");
var selected = null;
var dbName = "filtros";
var db = null;
var request = indexedDB.open(dbName);
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore(dbName, { keyPath: "id", autoIncrement: true });
objectStore.createIndex("times", ["timeA", "timeB"], { unique: true });
objectStore.createIndex("selected", "selected", { unique: false });
};
request.onsuccess = function(event) {
db = request.result;
var objectStore = db.transaction(dbName).objectStore(dbName);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
var option = document.createElement("option");
option.value = cursor.key;
option.textContent = cursor.value.timeA + " x " + cursor.value.timeB;
filtros.appendChild(option);
if (cursor.value.selected) {
selected = cursor.value;
filtros.selectedIndex = filtros.options.length - 1;
filtro.disabled = "disabled";
timeA.value = selected.timeA;
timeB.value = selected.timeB;
}
cursor.continue();
}
};
};
var atualizarFiltro = function () {
var newSelected = parseInt(filtros.options[filtros.selectedIndex].value);
filtro.disabled = newSelected != 0;
if (newSelected != 0) {
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
var request = objectStore.get(newSelected)
request.onsuccess = function(event) {
var selected = request.result;
timeA.value = selected.timeA;
timeB.value = selected.timeB;
selected.selected = true;
objectStore.put(selected);
};
} else {
timeA.value = "";
timeB.value = "";
}
}
filtros.addEventListener("change", function () {
if (selected) {
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
selected.selected = false;
var request = objectStore.put(selected);
request.onsuccess = function(event) {
atualizarFiltro();
};
} else {
atualizarFiltro();
}
});
salvar.addEventListener("click", function () {
if (timeA.value && timeB.value && timeA.value != timeB.value) {
var registro = { timeA: timeA.value, timeB: timeB.value, selected: true };
var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName);
var request = objectStore.add(registro);
request.onsuccess = function(event) {
registro.id = event.target.result;
var selected = registro;
var option = document.createElement("option");
option.value = selected.id;
option.textContent = registro.timeA + " x " + registro.timeB;
filtros.appendChild(option);
filtros.selectedIndex = filtros.options.length - 1;
filtro.disabled = "disabled";
};
request.onerror = function(event) {
alert(event.srcElement.error.message);
};
}
});.linha {
margin-bottom: 5px;
}
fieldset {
padding: 0px;
margin: 0px;
border: 0px none transparent;
}<div class="linha">
<label for="filtros">Filtros:</label>
<select id="filtros">
<option value="0">Novo Filtro</option>
</select>
</div>
<div class="linha">
<fieldset id="filtro">
<label>
Time A:
<input id="timeA" type="text" list="times" />
</label>
x
<label>
Time B:
<input id="timeB" type="text" list="times" />
</label>
<input id="salvar" type="button" value="Salvar" />
</fieldset>
</div>
<datalist id="times">
<option>Ice Blood</option>
<option>Renascitur</option>
<option>JPHS</option>
<option>Fitnns</option>
</datalist>The above example does not work because of a StackOverFlow Snippet limitation, but you can check the same in JSFiddle
I can not open the page here where I work, but if the tag is in this template:
<input type="text" name="algumName" value="COLOQUE AQUI O NOME DO TIME PADRAO"/>
By doing this, initially the textbox would come with what you wrote in the value attribute written
Place snippets of your code as this varies a lot from how you communicate with your server, but basically what is set in the value field is what is written if you want to give a submit of some form of query after the page is loaded you can use the query for this;
$(document).ready(function(){
$("#IdBotaoSubmitSeuForm").click();
//ou voce pode usar
$('#idDoSeuForm').submit();
});
I would work with cookies using the jquery-cookie plugin
When the user selects the Salvar como time padrão option, you get the value of the field and save it in the cookie as follows:
$.cookie("time_a_padrao", "Renascitur");
$.cookie("time_b_padrao", "JPHS");
When the page loads, you can use jQuery $(document).load() itself and see if there are cookies with the names time_a_padrao and time_b_padrao and get the values this way:
$.cookie("time_a_padrao");
Put the value of this cookie in your input and do the search.
To delete a cookie, if you want the default team to be another, do so:
$.removeCookie("time_a_padrao");