refrescar - JQuery Autocompletar verificar valor seleccionado
mantener valor de un select despues de enviar (4)
Creo que en lugar de escribir su propia función para verificar si los datos coinciden, puede simplemente llamar a search() . Si se llama a result() con un parámetro de data nulos, entonces sabe que no se usó la función de autocompletar y al llamar a search() en desenfoque, se garantiza que se llamará a result() al menos una vez.
He publicado este código para una pregunta similar , puede ayudar aquí también.
autocompleteField.result(function(event, data, formatted) {
if (data) {
//auto-complete matched
//NB: this might get called twice, but that''s okay
}
else {
//must have been triggered by search() below
//there was no match
}
});
autocompleteField.blur(function(){
autocompleteField.search(); //trigger result() on blur, even if autocomplete wasn''t used
});
Estamos utilizando el complemento de jquery autocompletado escrito por Jörn Zaefferer , y estamos tratando de verificar que se haya ingresado una opción válida.
El complemento tiene un resultado () evento que se activa cuando se realiza una selección. Esto está bien, pero necesito verificar el valor en el cuadro de texto cuando un usuario hace clic también. Así que hemos intentado eventos .change () y .blur (), pero ambos plantean un problema: al hacer clic en una entrada en el div de resultados (la lista de "sugerencias"), .change () y .blur () los eventos se activan, y esto es antes de que el complemento haya escrito un valor en el cuadro de texto, por lo que no hay nada que verificar en este momento.
Alguien podría ayudarme a configurar eventos, así que cada vez que alguien haga clic fuera, pero no en el cuadro de resultados, puedo verificar un valor válido en el cuadro. Si este es el enfoque equivocado, por favor infórmeme del correcto. Originalmente optamos por este complemento debido a su opción ''mustMatch''. Esta opción no parece funcionar en todos los casos. Muchas veces, una entrada válida se escribirá en el cuadro de texto y, a continuación, el plugin no la validará, no he podido determinar el motivo.
Ejemplo de código básico:
<html>
<head>
<title>Choose Favorite</title>
<script language="JavaScript" src="jquery-1.3.2.min.js" ></script>
<script language="JavaScript" src="jquery.autocomplete.min.js" ></script>
<script>
$(".suggest").autocomplete("fetchNames.asp", {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:false,
cacheLength:20,
max:20
});
$(".suggest").result(function(event, data, formatted) {
var u = this;
// Check value here
});
/* OR */
$(".suggest").change(function(me) {
//check value here
});
</script>
</head>
<body>
<label for="tbxName">Select name (I show 10):</label><br />
<INPUT type="text" id="tbxName" name="tbxName" class="suggest"><br />
</body>
</html>
Este es el código que he usado en el pasado. Muy limpio y sencillo.
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#currentSelectedLevel" ).autocomplete({
source: availableTags,
change: function( event, ui ) {
val = $(this).val();
exists = $.inArray(val,availableTags);
if (exists<0) {
$(this).val("");
return false;
}
}
});
Utilizo una estructura de datos global para realizar un seguimiento de los valores que se encontraron
var ac_sent = {};
el controlador de eventos .result () se llama antes que el controlador de eventos .change (), por lo que en .result (evento, datos, formateado) agrego los datos a la estructura:
ac_sent[ data ] = true;
luego, en el controlador de eventos .change (evento), verifico si hay un elemento en ac_sent [datos], y si no hay alguno, sé que no se encontró la palabra:
$( "#textbox" ).change( function( event ) {
var data = event.target.value;
if ( !ac_sent[ data ] ) {
// result was not found in autocomplete, do something...
ac_sent[ data ] = true; // remember that we processed it
}
return false;
});
ACTUALIZACIÓN: Esto debería funcionar. Estoy cargando la lista de nombres en un Array llamado ListOfNames, esto se usa en el evento onBlur () para verificar el nombre ingresado en los datos. Puede que necesite hacer algunos ajustes, pero creo que debería hacer lo que está buscando.
var listOfNames = [];
$(document).ready(function(){
$.get("fetchNames.asp", function(data){
listOfNames = data.split("/r/n");
});
$(".suggest").autocomplete("fetchNames.asp", {
matchContains:false,
minChars:1,
autoFill:false,
mustMatch:false,
cacheLength:20,
max:20
});
$("#tbxName").blur(function(){
if(!listOfNames.containsCaseInsensitive(this.value)){
alert("Invalid name entered");
}
});
});
Array.prototype.containsCaseInsensitive = function(obj) {
var i = this.length;
while (i--) {
if (this[i].toUpperCase() === obj.toUpperCase()) {
return true;
}
}
return false;
}