php - appendto - jQuery ui autocompletar con base de datos

jquery ui autocomplete select

Question

Soy bastante nuevo en JQuery y quizás intente lograr algo que podría ser un poco más difícil para un principiante. Sin embargo, estoy intentando crear un autocompletado que envía el valor actual a un script PHP y luego devuelve 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í está la última mitad de "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"}]

¿Alguien puede decirme a dónde me voy mal, por favor? Empezando a frustrarse bastante. El cuadro de entrada solo 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 tengo suerte.

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

Al usar la herramienta Web Developer de FireFox, aparece un error "b is null".

Answer 1

En caso de que alguien más lo necesite:

La documentación para autocompletar en la interfaz de usuario de jQuery especifica que el parámetro de cadena de consulta que se debe usar es " término " y no "q" ... o menos lo hace ahora.

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

Answer 2

Finalmente encontré la solución que se adapta 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 3

Sí, necesitas información de cabecera para tu 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 tvanfosson del enchufe

en cualquier caso, no creo que hagas la llamada ajax que hace el plugin.

Si no está usando 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 encabezado que faltan

Answer 4

Sencillo Jquery ui autocompletado, para aquellos que lo necesiten.

//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>

Answer 5

Una estructura JSON es una cadena plana, mientras que el map espera una matriz o estructura similar a una matriz. prueba json decodificar en la cadena antes de usar map.

Answer 6

Yo también tuve un problema como tú. Y ahora lo arreglo. El problema es que mi json que regresa de mi servidor contiene un error de sintaxis.

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

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

p.ej. "Hola mundo" no "Hola mundo"

Cuando lo arregles, puedes establecer la fuente como URL de cadena. El término estará en "término" cadena de consulta. ¡¡Y funciona!!

Answer 7

algunas sugerencias:

1. ¿Por qué dataType= "jsop" ? No parece ser jsonp. Creo que quieres "json".
2. inserta un cache : false en las opciones, también. Esto asegura que la solicitud siempre se realice y nunca se satisfaga desde el caché del lado del navegador.
3. Comprueba si la llamada se está yendo, con algo como Fiddler o Charles.
4. ¿Se llama tu éxito fn? Tienes una alert() allí. ¿Se invoca?
5. Si tiene Firebug o las herramientas de desarrollo de IE8, puede poner un punto de interrupción en la 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 era nula, la cadena vacía, cuando usé 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.