jquery ui autocompletar con la base de datos

Question

Soy bastante nuevo en JQuery y quizás estoy tratando de lograr algo que podría ser un poco más difícil para un principiante. Sin embargo, estoy intentando crear una autocompleta que envíe el valor actual a un script PHP y luego devuelva los valores necesarios.

Aquí está mi código Javascript

$("#login_name").autocomplete({ 
    source: function(request, response) { 
$.ajax({ 
    url: "http://www.myhost.com/myscript.php", 
    dataType: "jsonp", 

    success: function(data) { 
    alert(data); 
    response($.map(data, function(item) { 
     return { 
    label: item.user_login_name, 
    value: item.user_id 
     } 
    })) 
    } 
}) 
    }, 
    minLength: 2 
}); 

Y aquí es la mitad de la última "myscript.php"

while($row = $Database->fetch(MYSQLI_ASSOC)) 
{ 
    foreach($row as $column=>$val) 
    { 
     $results[$i][$column] = $val; 
    } 
    $i++; 
} 
print json_encode($results); 

que produce la siguiente salida

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}] 

¿Puede cualquier persona

dime dónde estoy yendo mal, por favor? Empezando a estar bastante frustrado. El cuadro de entrada simplemente se vuelve "blanco" y no se muestran opciones. El código funciona si especifico una matriz de valores.

ACTUALIZACIÓN He cambiado el código y aún no he tenido suerte.

$("#login_name").autocomplete({ 
    source: "/ajax/login_name.php", 
    dataType: "json", 
    minLength: 2, 
    cache: false, 
    select: function(event, ui) { 
     alert(ui); 
    } 
}); 

Utilizando la herramienta de desarrollador web de FireFox, aparece el error "b is null".

Answer 1

encontrado por fin la solución que se adapte a mis necesidades

$("#login_name").autocomplete({ 
    source: function(request, response){ 
    $.post("/ajax/login_name.php", {data:request.term}, function(data){  
     response($.map(data, function(item) { 
     return { 
      label: item.user_login_name, 
      value: item.user_id 
     } 
     })) 
    }, "json"); 
    }, 
    minLength: 2, 
    dataType: "json", 
    cache: false, 
    focus: function(event, ui) { 
    return false; 
    }, 
    select: function(event, ui) { 
    this.value = ui.item.label; 
    /* Do something with user_id */ 
    return false; 
    } 
}); 

Answer 2

algunas sugerencias:

1. dataType= "jsop" ¿Por qué? No parece ser jsonp. Creo que quieres "json".
2. inserte un cache : false en las opciones, también. Esto asegura que la solicitud siempre se realiza y nunca se satisface con la caché del lado del navegador.
3. comprueba si la llamada se va a salir, con algo como Fiddler o Charles.
4. ¿Su éxito se llama fn? Tienes un alert() allí. ¿Se invoca?
5. si tiene Firebug o las herramientas de desarrollador IE8, puede poner un punto de interrupción en el alert() para verificar el valor de los parámetros.
6. ¿Por qué especificar el nombre de host completo en la URL? Anoche tuve una situación extraña con autocompletar donde la respuesta fue nula, la cadena vacía, cuando utilicé un nombre de host diferente para la página y la solicitud de Ajax. Cuando lo modifiqué para usar el mismo nombre de host, la solicitud tuvo éxito. En realidad, debido a la misma política de origen, no debe tener ningún nombre de host en la URL para la llamada ajax.

Answer 3

Un Strcuture de JSON es una cadena plana, mientras que map espera una matriz o estructura de tipo array. Pruebe decodificar json en la cadena antes de usar el mapa.

Answer 4

Si usted necesita información de cabecera para su JSON

 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
     header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT"); 
     header("Cache-Control: no-cache, must-revalidate"); 
     header("Pragma: no-cache"); 
     header("Content-type: text/x-json"); 

y tvanfosson hace un buen punto de tope con el tapón de la

en anycase No creo que hacer la llamada ajax el plugin hace.

si de hecho usa jquery-ui autocomple, debe leer la documentación para obtener una versión básica en ejecución.su PHP está bien, aparte de los datos de cabecera que faltan

Answer 5

que tenía un problema como usted también. Y ahora lo soluciono El problema es que mi JSON que devuelve desde mi servidor contiene un error de sintaxis.

En http://api.jquery.com/jQuery.getJSON/ indica que si hay algún error en JSON, se producirá un error de forma silenciosa. El JSON debe coincidir con el estándar JSON aquí http://json.org/.

Para mi error es mi cadena en JSON está envolviendo en una sola cita. Pero el estándar JSON solo acepta cadenas que se envuelven entre comillas dobles.

por ejemplo. "Hola mundo" no "Hola mundo"

Cuando lo solucionas, puedes configurar el origen como cadena URL. El término estará en la cadena de consulta "término". ¡¡Y funciona!!

Answer 6

En caso de que nadie más lo necesita:

La documentación para autocompletar en jQuery UI especifica el parámetro de cadena de consulta a utilizar es 'término' y no 'q' ... o por lo menos lo hace ahora.

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor 

Answer 7

Simple Jquery ui autocomplete, para quienes puedan necesitarlo.

//select data from the table 
$search = $db->query('SELECT Title from torrents'); 

//then echo script tags and variables with php 
<?php echo '<script type="text/javascript"> 
$(function() { 
    var availableTags = ['; 
foreach ($search as $k) { 
    echo '"'.$k['Title'].'",'; 
} 
    echo ']; 
$("#tags").autocomplete({ 
    minLength:2, //fires after typing two characters 
    source: availableTags 
}); 
}); 
</script>'; 

?> 

su formulario HTML

<div id="search"> 
<form id="search-form"> 
<input id="tags" type="text" /> 
<input type="submit" value="Search" /> 
</form> 
</div>