jquery ui - wp_enqueue_script - jQuery autocompletar
wp enqueue style example (2)
Tengo un cuadro de texto de autocompletar que debe responder a 2 eventos:
- Cuando el usuario termine de escribir algo en el cuadro de texto (actualmente estoy usando el
focusoutpara suponer cuando el usuariofocusoutde escribir. 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 valores de autocompletar (estoy usando el evento de
selectde autocompletar para determinarlo)
El problema:
Cuando el usuario selecciona un elemento en la lista de valores de autocompletar, la cadena de eventos es tal que focusout se llama al focusout y luego a la select . Cuando focusout en el focusout , solo tengo acceso a lo que escribió el usuario, no a lo que el usuario seleccionó en 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 - Seleccione
ActionScriptde la lista de valores de autocompletar Observe 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>
En primer lugar, solo para fines educativos, es importante que todos entiendan que estos eventos perticulares siempre se dispararán 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: compilar la aplicación para 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: tener un valor marcado ya sea 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, utilice el valor en el campo de entrada para algo.
Esta es precisamente la razón por la cual jQueryUI introdujo un evento de change especial para autocomplete :
Se dispara cuando el campo está borroso, si el valor ha cambiado; ui.item se refiere al elemento seleccionado.
Este evento puede cumplir doble función para ambos requisitos:
$("#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.itemno se definirá cuando el usuario no haya seleccionado un valor de la lista de candidatos de autocompletar. - Por otro lado, este
this.valuesiempre será correcto.
Aquí hay un ejemplo de esto: http://jsfiddle.net/33GJb/