Búsqueda simultánea con Google y Bing, recuerda el último motor -- javascript campo con html campo con css campo con html5 campo con form camp codereview Relacionados El problema

Simultaneous search with Google and Bing, remember the last engine


1
vote

problema

Español

Una aplicación de prueba de concepto para ejecutar la misma consulta en Google y Bing. Por ejemplo, si uno de los motores toma demasiado tiempo en una conexión lenta o los resultados no son satisfactorios, la misma consulta se puede ejecutar en el otro motor con un solo botón.

Toda la aplicación es pequeño archivo único con & lt; 200 loc. Se puede guardar y cargar localmente con el protocolo 9988776665544330 en el navegador.

Flexbox1 se utiliza para mostrar todas las etiquetas, formularios y botones con canales iguales entre ellos. Tal vez pueda ser mejorado.

se puede probar aquí: https://dmitriz.github.io/search-app/

Estoy interesado en cualquier consejo para mejorar el código y / o el diseño o cualquier otra sugerencia.

  9988776655544332  
  body, html, main {   width: 100%;    height: 100%;    padding: 0;    margin: 0 } html {  height: 100%; } iframe {  width: 100%;  border: none;  border-top: solid thin;  border-top-style: groove; } input, button {   font-size: .6em; } .margin-left, .items-ml > * ~ * {  margin-left: 1em; } .margin-left-0 {  margin-left: .2em; } .margin-top, .items-mt > * + * {  margin-top: .6em; } .margin-adjust {  margin-top: -.2em;  /*display: block;*/ } .padding-box {  padding: .5em; } .flexbox {  display: flex; } .in-block { } .column {  flex-flow: column; } .flex-item-grow {  flex: 1; } .ai-stretch {  align-items: stretch; } .bold {  font-weight: bold; }3  
  <main class="flexbox column ai-stretch">  <section class="padding-box items-mt">   <form    id="search_form"   class="flexbox items-ml"    onsubmit="search()"   >   <label for="q">    Web Search:   </label>   <input     class="flex-item-grow"    type="search"     name="q"     placeholder="Type some text here"     autofocus=""    >   </form>   <section class="flexbox ai-stretch items-ml">   <div class="flexbox">    <button      onclick="set_engine('google'); search()"    >     Google!    </button>   </div>    <div class="flexbox">    <button      onclick="set_engine('bing'); search()"    >     Bing!    </button>   </div>    <span class="flexbox">    <span class="mmargin-adjust">     Default:     </span>    <span id="engine" class="bold margin-left-0 mmargin-adjust">     Google    </span>   </span>  </section>    <div id="notice" class=""></div>  </section>  <iframe  id="results"  name="iframe"  class="flex-item-grow"  style="display: none" >   There would be Bing Search here but your browser does not support inline frames. </iframe>  </main>  
Original en ingles

A proof of concept app to run the same query on both Google and Bing. For instance, if one of the engines takes too long on a slow connection or the results are not satisfactory, the same query can be run on the other engine with single button click.

The whole app is small single file with < 200 loc. Can be saved and loaded locally with the file:// protocol in the browser.

Flexbox is used to display all labels, forms and buttons with equal gutters inbetween. Perhaps can be improved.

Can be tested here: https://dmitriz.github.io/search-app/

I am interested in any advice on improving the code and/or layout or any other suggestions.

init(); function init () {   window.engine = 'bing';   window.engine_display = document.getElementById('engine');   window.search_form = document.getElementById('search_form');   window.results_elm = document.getElementById('results');   window.notice_elm = document.getElementById('notice');    set_engine(window.engine); }   function set_engine (engine) {   console.log('Change search engine to ', engine);    window.engine = engine;   window.engine_display.textContent = capitalize(engine);   window.search_form.action = engine_url(engine);    set_notice(window.notice_elm, engine);         } function set_notice (element, engine) {   element.textContent = 'bing' === engine     ? 'Search results will appear here...'     : 'Search results will appear in another tab as Google refuses to run in a frame...' } function search () {   var isGoogle = 'google' === window.engine;    window.notice_elm.style.display  = isGoogle ? 'block'  : 'none';   window.results_elm.style.display = isGoogle ? 'none'   : 'block';   window.search_form.target        = isGoogle ? '_blank' : 'iframe';    return window.search_form.submit();      } function capitalize (string) {   return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); } function engine_url (engine) {   return 'https://www.' + engine + '.com/search'; }
body, html, main {   width: 100%;    height: 100%;    padding: 0;    margin: 0 } html {  height: 100%; } iframe {  width: 100%;  border: none;  border-top: solid thin;  border-top-style: groove; } input, button {   font-size: .6em; } .margin-left, .items-ml > * ~ * {  margin-left: 1em; } .margin-left-0 {  margin-left: .2em; } .margin-top, .items-mt > * + * {  margin-top: .6em; } .margin-adjust {  margin-top: -.2em;  /*display: block;*/ } .padding-box {  padding: .5em; } .flexbox {  display: flex; } .in-block { } .column {  flex-flow: column; } .flex-item-grow {  flex: 1; } .ai-stretch {  align-items: stretch; } .bold {  font-weight: bold; }
<main class="flexbox column ai-stretch">  <section class="padding-box items-mt">   <form    id="search_form"   class="flexbox items-ml"    onsubmit="search()"   >   <label for="q">    Web Search:   </label>   <input     class="flex-item-grow"    type="search"     name="q"     placeholder="Type some text here"     autofocus=""    >   </form>   <section class="flexbox ai-stretch items-ml">   <div class="flexbox">    <button      onclick="set_engine('google'); search()"    >     Google!    </button>   </div>    <div class="flexbox">    <button      onclick="set_engine('bing'); search()"    >     Bing!    </button>   </div>    <span class="flexbox">    <span class="mmargin-adjust">     Default:     </span>    <span id="engine" class="bold margin-left-0 mmargin-adjust">     Google    </span>   </span>  </section>    <div id="notice" class=""></div>  </section>  <iframe  id="results"  name="iframe"  class="flex-item-grow"  style="display: none" >   There would be Bing Search here but your browser does not support inline frames. </iframe>  </main>
              

Lista de respuestas


Relacionados problema

1  Formulario de validación JavaScript  ( Validation form javascript ) 
Soy un principiante para JavaScript y sé sobre las validaciones de jQuery, sin embargo, no quiero usar una base como jQuery todavía. Me pregunto si lo que h...

1  ¿Hay una forma de secadora para crear este generador de cita jQuery?  ( Is there a dryer way to create this jquery quote generator ) 
Esta es una de mis primeras aplicaciones reales que he realizado con JavaScript (jQuery), por lo que sé que mi enfoque probablemente no sea el mejor y mi larg...

6  Validación básica de forma  ( Basic form validation ) 
Pregunta + Resultado deseado El código a continuación funciona actualmente, sin embargo, no estoy convencido de que la utilización de un 9988777666554433...

7  Clase Forma Formulario PHP  ( Php form builder class ) 
Me gustaría revisar mi clase de generador de formularios. Quiero saber sobre los siguientes temas: es este eficiente? ¿Esto tiene alguna falla? es esto...

5  Validación del formulario AJAX  ( Ajax form validation ) 
Este es mi primer intento de la validación del formulario AJAX, y todo funciona como se esperaba, el ejemplo final final mantendrá muchos más campos de entrad...

1  Pumular las desplegaciones de la provincia de la provincia de la ciudad de la consulta de la Firana  ( Populate country province city dropdowns from firebase query ) 
Soy nuevo en Firebase y soy un desarrollador de SQL en recuperación, por lo que no he envuelto mi mente en todos los aspectos de las consultas de Firsebase. T...

2  Usando jQuery para configurar la clase de un elemento correspondiente al botón de radio seleccionado  ( Using jquery to set the class of an element corresponding to the selected radio ) 
Soy un poco nuevo con jQuery, pero puede hacerlo trabajar para realizar la funcionalidad que estoy buscando. La siguiente función verifica el valor de la en...

2  Validación instantánea de la longitud del campo de la forma  ( Instantaneous validation of form field length ) 
Dado que tengo una función que se puede hacer de unas maneras como de costumbre, me preguntaba qué sigue es el mejor para lograr la validación del formulario ...

2  Formulario de clases de clase y clases infantiles  ( Form validator class and child classes ) 
Estoy creando una clase de formulario para validar los datos del formulario, y quisiera algunos consejos sobre cómo refactorizarlo por las mejores prácticas. ...

3  Verificando que todos los campos de formulario se completan  ( Verifying that all form fields are filled in ) 
Agarré la forma de algún sitio aleatorio porque solo estoy interesado escribir el Javascript en este momento. Estoy tratando de verificar que un usuario hay...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos