Symfony autocompletado jquery

[agugut]

Hola: Estoy desarrollando una aplicacion en symfony y queria agregar un campo buscador con autocompletar.
Estuve siguiendo estos viendos:
http://www.youtube.com/watch?v=n93ExATvzDg&feature=related
http://www.youtube.com/watch?v=AWiKZjvg_wM&feature=related
Pero no me doy cuenta como aplicarlos a symfony.Uso Doctrine
Si alguien tiene algun ejemplo lo agradecere

[historiasdemaria]

Buenas,

Yo tengo un caso asi, un autocomplete, en el html hay:

Código HTML:

<input size="30" id="inputString" name="inputString" onkeyup="lookup(this.value);" onblur="fill();" autocomplete="off" type="text">
 
<div class="suggestionsBox" id="suggestions" style="display: none;"> 
    <div class="suggestionList" id="autoSuggestionsList">&nbsp;
    </div>
 
Y luego estas dos funciones en el javascript de la pagina:
 
 
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("my_module/my_index", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
 

En my_module/my_index hay un script que hace la query a la base de datos, ahi tu lo puedes hacer con Doctrine..

[agugut]

el html y la funcion jquery los tienes en my_module/my_index. Lo aplicaste en symfony o en php puro?

[historiasdemaria]

Iniciado por agugut

el html y la funcion jquery los tienes en my_module/my_index. Lo aplicaste en symfony o en php puro?

No, en my_module/my_index esta la llamada al script php en base de datos, es el parametro callback de ajax

La funciones javascript lookup y fill estan en my_module_autocomplete/my_index
El include a JQuery se puede poner como parametro javascript en view.yml o bien llamarlo en indexSuccess.php con el helper use_javascript

[agugut]

No entiendo bien donde va cada parte.
Yo lo quiero aplicar en un modulo de nombre tiposervicio, ese seria my_module?
y que seria my_module_autocomplete?
Me podrias pasar si no es mucho lio los codigos de los archivos completos?
Gracias

[historiasdemaria]

Iniciado por agugut

No entiendo bien donde va cada parte.
Yo lo quiero aplicar en un modulo de nombre tiposervicio, ese seria my_module?
y que seria my_module_autocomplete?
Me podrias pasar si no es mucho lio los codigos de los archivos completos?
Gracias

tiposervicio seria my_module_autocomplete o sea el que tiene el html con el input text y las dos funciones javascript en indexSuccess.php

El script que tiene la consulta a la base de datos podria estar en un modulo tipo "ajax/index" ese es el que devuelve la lista de cosas con etiquetas <li>datos</li> a mostar en la lista autocomplete

Espero que este un poco mas claro, de cualquier forma aqui esta el enlace al tutorial que yo utilice en donde esta el codigo completo:
http://www.nodstrum.com/2007/09/19/autocompleter/

[agugut]

mmm, estoy medio perdido. te paso como me quedaron hasta ahora los archivos:
puse en el modulo tipoServicio en buscarSuccess.php lo siguiente:
<?php
slot(
'title',
sprintf('> Tipos de Servicio >Buscar'))
?>
<?php include_stylesheets() ?>
<?php include_javascripts() ?>
<?php use_javascript('jquery-1.5.2.min.js') ?>
<?php use_javascript('jquery-ui-1.8.11.custom.min.js') ?>
<h1>Tipos de Servicio</h1>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("script/datos", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<form action="<?php echo url_for('tiposervicio/buscar') ?>" method="get" >
<input size="30" id="inputString" name="inputString" onkeyup="lookup(this.value);" onblur="fill();" autocomplete="off" type="text">

<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">&nbsp;
</div></div>
&nbsp;<input type="button" name="Cancelar" value="Cancelar" onClick="javascript:history.back()">
<input type="submit" value="Buscar" />
</form>

No se que poner en el executeBuscar del actions.class.php
En el modulo script tendria que poner en executeDatos la consulta? que pongo en datosSuccess.php?
Gracias

[historiasdemaria]

Bueno, veamos:

En executeBuscar recuperas el parametro $request->getParameter("inputString") y lo pones en el SQL que devolvera los datos de busqueda, o sea la lista de los tipos de servicio correspondientes

En script/ executeDatos o en datosSuccess.php pones la consulta SQL para el autocomplete del campo inputString, si lo haces en el actionclass pon un exit() al final

A ver si te sale ;)

[agugut]

Disculpa de nuevo, no entiendo la parte

lo pones en el SQL que devolvera los datos de busqueda, o sea la lista de los tipos de servicio correspondientes

o sea la consulta doctrine que en mi caso es
$this->consulta = Doctrine_Query::create()
->select('t.*')
->from('TipoServicio t')
->where('t.nombre LIKE?', '%' . $buscar . '%')
->fetchArray();
iria en executeBuscar??
como vinculo el execute buscar con el modulo script?
gracias

[agugut]

Mira ahora deje asi los archivos
buscarSuccess.php

<?php
slot(
'title',
sprintf('> Tipos de Servicio >Buscar'))
?>
<?php include_stylesheets() ?>
<?php include_javascripts() ?>
<?php use_javascript('jquery-1.5.2.min.js') ?>
<?php use_javascript('jquery-ui-1.8.11.custom.min.js') ?>
<script type="text/javascript">
function lookup(inputstring) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("script/datos", {queryString: ""+inputstring+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<h1>Tipos de Servicio</h1>
<form action="<?php echo url_for('tiposervicio/buscar') ?>" method="get" >
<input size="30" id="inputstring" name="inputstring" onkeyup="lookup(this.value);" onblur="fill();" autocomplete="off" type="text">

<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">&nbsp;
</div></div><br/>
&nbsp;<input type="button" name="Cancelar" value="Cancelar" onClick="javascript:history.back()">
<input type="submit" value="Buscar" />
</form>

executeBuscar(que esta en el actions.class.php de TipoServicio)

public function executeBuscar(sfWebRequest $request) {
$buscar=$request->getParameter('inputstring');
//var_dump($a);
$this->consulta = Doctrine_Query::create()
->select('t.*')
->from('TipoServicio t')
->where('t.nombre LIKE?', '%' . $buscar . '%')
->fetchArray();

executeDatos(que esta en el actions.class.php de TipoServicio)

public function executeDatos(sfWebRequest $request) {
//$this->form = new UsuarioForm();
$buscar = $request->getParameter('inputString');
$this->consulta = Doctrine_Query::create()
->select('t.*')
->from('TipoServicio t')
->where('t.nombre LIKE?', '%' . $buscar . '%')
->fetchArray();
exit();
}

Me parece que me falta algo en el script porque no anda el autocompletado gracias

[historiasdemaria]

Iniciado por agugut

Mira ahora deje asi los archivos
buscarSuccess.php


executeBuscar(que esta en el actions.class.php de TipoServicio)

executeDatos(que esta en el actions.class.php de TipoServicio)

Me parece que me falta algo en el script porque no anda el autocompletado gracias

Si, mira en el executeDatos tienes que rellenar los valores de la etiqueta <li>
recupera los datos que devuelve tu consulta y pones algo asi:

while(recorro_mis_datos)
echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>';

y como estas en un actionclass al final pones exit();
ya esta

[agugut]

public function executeDatos(sfWebRequest $request) {
//$this->form = new UsuarioForm();
$buscar = $request->getParameter('inputString');
$this->consulta = Doctrine_Query::create()
->select('t.*')
->from('TipoServicio t')
->where('t.nombre LIKE?', '%' . $buscar . '%')
->fetchArray();
while ($result = mysql_fetch_array(($this->consulta), MYSQL_ASSOC))
echo '<li onClick="fill(\'' . $result->value . '\');">' . $result->value . '</li>';
exit();
}

Asi me quedo el executeDatos, pero sigue sin andar. Me parece que me esta faltando pasar algo, porque no me doy cuenta como conectar el modulo script con el modulo tiposervici

[historiasdemaria]

El modulo script no esta conectado con el modulo tipo servicio..
mira, trabaja solo el autocomplete hasta que consigas hacerlo funcionar..
yo hace mucho que no trabajo con Doctrine, verifica que la consulta que has puesto devuleve datos, utiliza Firebug para verificar la respuesta ajax, me parece que la llamada a

Código Javascript:

$.post("script/datos" ..
 

no llega,

intenta esto:

Código Javascript:

$.post("../script/datos"
 

a ver que tal

[agugut]

como controlo con firebug para ver si el ajax esta devolviendo algo?

[historiasdemaria]

Iniciado por agugut

como controlo con firebug para ver si el ajax esta devolviendo algo?

Disculpa, esto no se puede explicar en un post, puedes buscar un libro o un buen tutorial para ello ;)

[agugut]

Ya solucione el problema, capaz que es de un modo poco ortodoxo. Les paso como me quedo el codigo
buscarSuccess.php

Código PHP:

  <?php 
slot( 
        'title', 
        sprintf('> Tipos de Servicio >Buscar')) 
?> 
<?php include_stylesheets() ?> 
<?php include_javascripts() ?> 
<?php use_javascript('jquery-1.5.2.min.js') ?> 
<?php use_javascript('jquery-ui-1.8.11.custom.min.js') ?> 
<?php 
$arr = array(); 
$j = 0; 
foreach ($datos as $i) { 
    $arr[$j] = $i; 
    $j++; 
} 
$arreglo = json_encode($arr); 
?> 
<script type="text/javascript"> 
    var myArray = JSON.parse('<?php echo $arreglo; ?>'); 
    $(document).ready(function(){ 
        $("#autoc1").autocomplete({ 
            source: myArray 
        }) 
    }) 
</script> 
<h1>Tipos de Servicio</h1> 
<form action="<?php echo url_for('tiposervicio/buscar') ?>" method="post" > 
    <div id="busqueda"> 
        <input type="text" size="20" id="autoc1" name="autoc1"/> 
    </div> 
    &nbsp;<input type="button" name="Cancelar" value="Cancelar" onClick="javascript:history.back()"> 
    <input type="submit" value="Buscar" /> 
</form> 
<div id="resultados"> 
<?php 
if ($sql != NULL): 
?> 
    <hr/> 
    <table border="1" cellpadding="1" cellspacing="1" class="tabla"> 
        <thead> 
            <tr class="modo1"> 
                <th>Tipo de Servicio</th> 
                <th>Descripcion</th> 
            </tr> 
        </thead> 
        <tbody> 
<?php 
    foreach ($sql as $i): 
?> 
            <tr class="modo2"> 
                <td><a href="<?php echo url_for('tiposervicio/show?id=' . $i['id']) ?>"><?php echo $i['nombre'] ?></a></td> 
                <td><?php echo $i['descripcionTipoServicio'] ?></td> 
            </tr> 
 
<?php endforeach; ?> 
 
        </tbody> 
    </table> 
<?php endif; ?> 
</div>  

executeBuscar:

Código PHP:

      public function executeBuscar(sfWebRequest $request) { 
        $todos = Doctrine_Query::create() 
                        ->select('t.*') 
                        ->from('TipoServicio t') 
                        ->fetchArray(); 
        $this->datos = array(); 
        $j = 0; 
        foreach ($todos as $i) { 
            $this->datos[$j] = $i['nombre']; 
            $j+=1; 
        } 
         
        $buscar = $request->getParameter('autoc1'); 
        if ($buscar != NULL) { 
            $this->sql = Doctrine_Query::create() 
                            ->select('t.*') 
                            ->from('TipoServicio t') 
                            ->where('t.nombre LIKE?', '%' . $buscar . '%') 
                            ->fetchArray(); 
        } else { 
            $this->sql = NULL; 
        } 
        //var_dump($this->sql);*/ 
    }