jQuery autocompletado

Tengo un cuadro de texto de autocompletar que necesita para responder a eventos: 2jQuery autocompletado

Cuando el usuario ha terminado de escribir algo en el cuadro de texto (Actualmente estoy usando focusout asumir cuando se realiza el usuario Por lo tanto, si un usuario saca pestañas de un cuadro de texto, significa que el usuario ha terminado de escribir.
Cuando el usuario selecciona un elemento en la lista de autocompletar de valores (estoy usando el evento autocompletar select para determinarlo)

El problema:

Cuando el usuario selecciona un elemento de la lista de autocompletar de los valores, la cadena de evento es tal que focusout se llama primero, entonces el select. Cuando estoy en focusout, solo tengo acceso a lo que escribió el usuario, no a lo que el usuario seleccionó de la lista de valores de autocompletar, y eso es lo que realmente necesito. ¿Cómo resuelvo este problema?

Pasos para reproducir el problema:

En el cuadro de texto, escriba la letra a
ActionScript Seleccione de la lista de autocompletar de los valores

cuenta los mensajes de console.debug:

focusout event called 
a 
select event called 
ActionScript

Aquí está el código:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
     <title>Data Matching</title> 
    </head> 
    <body> 
     <form> 
      <input id="1" type="text"></input> 
      <input id="2" type="submit"></input> 
     </form> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

     <script> 
     $('#1').autocomplete(
     { 
      select: function (event, ui) 
      { 
       "use strict"; 
       console.debug('select event called'); 
       console.debug(ui.item.value); 
      }, 
      source: ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"], 

      minLength: 1 
     }); 

     $('#1').focusout(function() 
     { 
      "use strict"; 
      console.debug('focusout event called'); 
      console.debug($(this).attr('value')); // At this point, I need the value that was selected from autocomplete. I only get the value that the user typed, though 
     }); 
     </script> 
    </body> 
</html>

Fuente

2011-09-11 StackOverflowNewbie

Esta es precisamente la razón por jQueryUI introdujo un evento especial para changeautocomplete:

activa cuando se difumina el campo, si el valor ha cambiado; ui.item se refiere al elemento seleccionado.

Este evento puede hacer una doble función, tanto de sus necesidades:

$("#1").autocomplete({ 
    /* snip */ 
    change: function(event, ui) { 
     if (ui.item) { 
      console.log("ui.item.value: " + ui.item.value); 
     } else { 
      console.log("ui.item.value is null"); 
     } 
     console.log("this.value: " + this.value); 
    } 
});

ui.item no se definirá cuando el usuario no ha seleccionado un valor de la lista de candidatos de autocompletar.
Por otro lado, se this.value siempre ser correcta.

He aquí un ejemplo de esto: http://jsfiddle.net/33GJb/

Fuente

2011-09-12 01:29:00

Esto funcionó. Me deshice del controlador de eventos 'focusout'. Gracias. – StackOverflowNewbie

Impresionante, me alegra ayudarte. –

Además, recuerde aceptar la respuesta si ayudó ':)' –

En primer lugar, sólo para fines educativos, es importante para cualquier persona entiende que estos eventos perticular siempre se disparará en este orden. Siendo ese el caso, creo que hay algunas formas diferentes de resolver el problema y esto es lo que se me ocurrió;

Uno: cree la aplicación de modo que los valores múltiples seleccionados por el usuario (tipo o seleccionado) no interfieran. Por ejemplo, si la aplicación está corrigiendo automáticamente la ortografía, y alguien escribió "orphanag" en el foco, el código que buscaba la ortografía más cercana reemplazaría el valor con "orfanato", que si alguien realmente seleccionara "orfanatos", reemplazaría el valor con el valor seleccionado. Lo más probable es que no haya un problema aquí, excepto el deseo de una optimización excesiva.

Dos: tienen un valor marcado en Javascript o en el elemento Html ("corregido de datos = falso") que existe. En FocusOut establece un SetTimeout para esperar un tiempo. Luego, si los usuarios han seleccionado un valor, establezca su valor marcado como verdadero. Cuando la duración esté activa, verifique el valor marcado, si es verdadero, no haga nada, de lo contrario, use el valor en el campo de entrada para algo.

Fuente

2011-09-11 23:30:07

Erik, estaba contemplando soluciones como las que están planteando. Espero no tener que ir por esa ruta, ya que me parece un poco hackish (pero tal vez no lo es, tal vez es así como son las cosas y tengo que lidiar con eso). ¿Alguna otra idea? – StackOverflowNewbie

No realmente, si no te gusta uno, entonces dos es un método de señalización, es muy parecido a cómo funciona el enhebrado. –

Sí ... # 2 es probablemente una mejor opción para mi problema. – StackOverflowNewbie

Respuesta

Cuestiones relacionadas