Criar tela de pesquisa no próprio HTML

[rdpacato 2]

Olá

 

Pessoal,

Preciso criar uma tela de consulta, onde tenho:
- Uma lista com aulas
- Número da aula
- Escola

E preciso criar uma tela de consulta, onde digito o número e pesquisa a aula e retorna a aula e a escola.

até ai tranquilo... MAS... não posso usar BD... tipo esse site:

http://www.aliancaabc.org/eaeRegional/consultaAula.php

Pensei em algo taxado no próprio HTML... porque não são tantos dados... e onde está hospedado, só daria para acrescentar uma tela em HTML, nada em Java, BD, por isso a dificuldade... então pensei em deixar algo oculto no próprio HTML. Só não sei como.

[L. Henrique 179]

Rdpacato,

Solução em HTML/CSS:

<div style="display: none !important;">
  // Aqui terão seus dados.
</div>

.classe-ou-id {
   display: none !important;
}

O que você vai precisar é puxar a informação de alguma forma, usando PHP ou JavaScript. Você por exemplo pode puxar o conteúdo de uma div utilizando propriedades como html() ou text() e coloca-las em outro local.

Veja um exemplo:

<?php
   var conteudo = $('#conteudo').html();
   var recebe_conteudo = $('#recebe_conteudo');

   recebe_conteudo.html(conteudo);
?>

Também pode ser utilizado text ou val ou qualquer coisa que for melhor pra você nesse caso.

Abraços!

[rdpacato 2]

Valeu cara... sem querer abusar.. vc poderia me ensinar no JS? não manjo de php

[L. Henrique 179]

Rdpacato,

É a mesma coisa, só não esquece de adicionar a library do jQuery. :D

Veja como ficaria o código:

$(document).ready(function() {
  var dado = $('#dado').html();
  var recebe_dado = $('#recebe_dado');
  
  recebe_dado.html(dado);
});

Fiz uma demo também e deixo aqui no final da resposta (Coloquei um evento onClick pra você interagir e ver como funciona). Lembrando que o atributo HTML vai copiar até as tags que estão dentro da tabela/div/section.

DEMO

Abraços!

[rdpacato 2]

e como pesquisa? criar aquele campo de pesquisa e trazer o resultado...

 

Pensei em deixar oculto em uma tabela todos os dados (como no exemplo que passei, não sei se vc viu se digitar um número de 1 a 60) e mostrar meio que no formato da tabela, só as aulas que estão em curso em escolas diferentes

[L. Henrique 179]

Rdpacato,

Antes de te dar essa resposta, preciso saber uma coisa: Por quê não usar BD? - Daria menos trabalho puxar valores do banco e pedir para popular uma tabela do que exibir um conteúdo escondido no HTML que pode ser encontrado através do inspecionar elemento.

Lembrando que o uso de PHP nesse caso é totalmente necessário, não dependa do JS.

Abraços!

[rdpacato 2]

Oi Henrique...

 

É que é um servidor de hospedagem free e não suporta BD... e a pessoa precisa fazer só esse esquema de subir aula e quando alguém pesquisar a aula, mostra em qual data e escola vai ter essa aula para repor.

 

 

Se fosse com BD eu já tinha feito, mas como ficou só na tela, eu não manjo muito de php ou js... se eu ver um exemplo, consigo replicar de boa... mas do zero não manjo, por isso estou te enchendo...

Lá eu vi que da para colocar uma tela em html... por isso pensei em fazer tudo em um arquivo html só.

[L. Henrique 179]

Rdpacato,

Você pode adicionar um MySQL dentro da hospedagem. Isso não é recomendado, pois não é nada seguro, mas só pra exibição de informação não privada já seria uma grande solução.

Um método pra fazer o que deseja é criar um array de informações no próprio JS e depois chama-los dentro do Autocomplete do jQuery UI, depois é só colocar um evento click e puxar essas informações pra uma table.

Veja o exemplo aqui: DEMO

 

Veja o código completo aqui abaixo

HTML:

<input type="text" id="pesquisa">

JS - Lembrando que tem o jQuery 2.2.4 + jQuery UI 1.12

$(function() {
	var valores = [
  	"Abacate", "Canjica", "Banana", "Melão", "Laranja", "Maçã", "Limão", "Melância", "Uva", "Morango", "Munguzá", "Baião", "Canjica", "..."
  ];
  $('#pesquisa').autocomplete({source: valores});
});

Digite qualquer coisa no input e ele te retornará um ou mais resultados do array valores[].

Abraços!

[rdpacato 2]

Bem legal Henrique... show...

 

Existe alguma maneira de eu colocar uma formatação? tipo do site que mandei como exemplo? colocando em tabela? e até mesmo m botão junto aos valores?

[L. Henrique 179]

Rdpacato,

Infelizmente não posso te entregar um código pronto (Senão vira freelance $$). Você vai precisar pegar os exemplos, estudar JS/JQ e então implementar no seu site.

Abraços!

[angelorubin 142]

Não seria a melhor opção, mas já que não existe a necessidade de privacidade com os dados, você poderia utilizar a API storage.

https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Storage_API_pt_br