Fix name in search field

Question

In this html there is the search field, where I type the name of the teams.

There is the option to save the team as default, but I would like to save the name already, every time you open the page it already open searching 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 make the tests follow some teams that can be released in this field: Ice Blood, Renascitur, JPHS and Fitnns.

Answer 1

I couldn’t see your example, but you can use Indexeddb. for this you can store your filter in Indexeddb with 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;
}

follows an example of basic operations with Indexeddb:

Get all the 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();
    }
 };

Get Registration by ID:

var objectStore = db.transaction(dbName).objectStore(dbName);
var request = objectStore.get(id)
request.onsuccess = function(event) {
    var filtro= request.result;
};

Insert Record:

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 due to a Stackoverflow Snippet limitation, but you can check the same on Jsfiddle

Answer 2

I’m not able to 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"/>

Doing this, initially the textbox would come with what you write in the written value attribute

Put snippets of your code because it 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 query form Ubmit after the page is loaded you can use the query for this;

$(document).ready(function(){

 $("#IdBotaoSubmitSeuForm").click(); 
 //ou voce pode usar     
 $('#idDoSeuForm').submit();


});

Answer 3

I would work with cookies using the plugin jquery-cookie

At the moment the user selects the option Salvar como time padrão you take the value of the field and save it to the cookie this way:

$.cookie("time_a_padrao", "Renascitur");
$.cookie("time_b_padrao", "JPHS");

When the page loads, you can use jQuery itself $(document).load() and see if there are cookies with the names time_a_padrao and time_b_padrao and take values this way:

$.cookie("time_a_padrao");

Put the value of this cookie in your input and do the search.

For you to delete a cookie, if the user wants the default team to be another one, do so:

$.removeCookie("time_a_padrao");