Collegare stringa a variabile in un funzione jquery

[marcopaolo79]

Ciao a tutti il mio problema che pensavo fosse banale è questo:
utilizzo un jquery per fare l'autocompletamente di un campo di testo e la funziona jquery è questa:

$(function() {
        $("#iddiv").autocomplete(
...
...
)                    
    });

ora siccome io ho n #iddiv vorrei evitare di riscrivere il codice javascript ogni volta ovvero così:

$(function() {
        $("#iddiv0").autocomplete(
...
...
)                    
    });

$(function() {
        $("#iddiv1").autocomplete(
...
...
)                    
    });

$(function() {
        $("#iddiv2").autocomplete(
...
...
)                    
    });

e avevo pensato di fare un bel ciclo for così:

for (i=0; i<10; i++) { 
    $(function() {
        $("#iddiv"+i).autocomplete(
...
...
)                    
    });
};

Ma ahimè non funziona mentre se copio il codice come ho fatto nel primo caso mi funzionano tutti i campi testo che hanno l'autocompletamento.....
Perchè? dove sbaglio?
Grazie a tutti

[Vindav]

usa una classe

$(".tuaclasse").autocomplete(

[marcopaolo79]

Ti ringrazio ho capito che invece che usare l'id posso usare la classe e faccio sicuramente prima e meglio; adesso però ho un'altra necessità... quello che viene elaborato dentro la funzione di autocompletamento poi è riportato a video dentro l'area di testo con uno specifico ID:

...
select: function( event, ui ) {
$("#idtext1").val( "[" + ui.item.label + "] " + ui.item.actor );
                return false;
            }
...

posso leggere l'id dell'area di testo che chiama l'autocompletamento?

[Vindav]

puoi usare this, this si riferisce sempre all'area di testo "corrente", cioè a quella che ha chiamato l'autocompletamento.
$(this).val(...

[marcopaolo79]

Ti ringrazio sei molto gentile ma non riesco a fare quello che vorrei, ti chiedo un'ultimo aiuto se proprio nn ce la faccio cambierò strada...
Io ho due campi di testo dove su entrambi c'è l'autocompletamento in jquery.
Se scrivo "manualmente" le due funzioni javascript la cosa mi funziona se le scrivo "dinamiche" (come vorrei perchè i campi di testo possono essere 2,3,4... n) non riesco a farlo funzionare.

Questo il codice "manuale":

<script>
    $(function() {
        $(".nomeclasse").autocomplete(
        {
            source:
                    function(request, response) { 
                            $.ajax({ 
                            url: "/pagina-chiamata.asp",
                            dataType: "json",
                            
                            data: { 
                                term : request.term,
                                mode : "TBL_DB",
                                field: #idinputtext1
                            }, 
                            
                            success: function(data) { 
                                response(data); 
                            } 
                            }); 
                        }, 

                        minLength: 1,
                        delay: 700,
    
            select: function( event, ui ) {
                $("#idinputtext1").val( "[" + ui.item.label + "] " + ui.item.actor );
                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>[<strong>" + item.label + "</strong>] " + item.actor + "</a>" )
                .appendTo( ul );
            };        
    });

    $(function() {
        $(".nomeclasse").autocomplete(
        {
            source:
                    function(request, response) { 
                            $.ajax({ 
                            url: "/pagina-chiamata.asp",
                            dataType: "json",
                            
                            data: { 
                                term : request.term,
                                mode : "TBL_DB",
                                field: #idinputtext2
                            }, 
                            
                            success: function(data) { 
                                response(data); 
                            } 
                            }); 
                        }, 

                        minLength: 1,
                        delay: 700,
    
            select: function( event, ui ) {
                $("#idinputtext2").val( "[" + ui.item.label + "] " + ui.item.actor );
                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>[<strong>" + item.label + "</strong>] " + item.actor + "</a>" )
                .appendTo( ul );
            };        
    });   
</script>
....
....
....
Input Text: <input name="idinputtext1" type="text" id="idinputtext1" class="nomeclasse" />
<br /><br />
Input Text: <input name="idinputtext2" type="text" id="idinputtext2" class="nomeclasse" />

io vorrei scrivere una "cosa" del genere (che ovviamente adesso non funziona)

<script>
    $(function() {
        $(".nomeclasse").autocomplete(
        {
            source:
                    function(request, response) { 
                            $.ajax({ 
                            url: "/pagina-chiamata.asp",
                            dataType: "json",
                            
                            data: { 
                                term : request.term,
                                mode : "TBL_DB",
                                field: this.attr('id')
                            }, 
                            
                            success: function(data) { 
                                response(data); 
                            } 
                            }); 
                        }, 

                        minLength: 1,
                        delay: 700,
    
            select: function( event, ui ) {
                $(this).attr('id').val( "[" + ui.item.label + "] " + ui.item.actor );
               //  $(this).val( "[" + ui.item.label + "] " + ui.item.actor );
                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>[<strong>" + item.label + "</strong>] " + item.actor + "</a>" )
                .appendTo( ul );
            };        
    });  
</script>
....
....
....
Input Text: <input name="idinputtext1" type="text" id="idinputtext1" class="nomeclasse" />
<br /><br />
Input Text: <input name="idinputtext2" type="text" id="idinputtext2" class="nomeclasse" />

In pratica recuperare il nome dell'id del campo di testo (perchè anche quel nome contiene variabili) quando è selezionata la classe dell'autocompletamento....

dove sbaglio?

ciao e grazie ancora

[Vindav]

Le cose si complicano un pochino, purtroppo all'interno delle chiamata ajax this non fa riferimento all'area di testo corrente, mentre nella funzione select hai fatto un errore tu(è corretta la parte commentata), prova a cambiare il codice cosi:

  $(".nomeclasse").autocomplete({
  source: function(){
this_id = $(this.element).attr("id");

$.ajax
     ....
     field: this_id
  },
  select: function(){
     $(this).val(...)  
  }
});
});

se ti serve il cancelletto iniziale fai cosi: field: "#"+this_id

[marcopaolo79]

Grazie al tuo post ho capito che dovevo intervenire anche sulla pagina che li carica i dati e ho risolto così:

<script>
    $(function() {
        $(".nomeclasse").autocomplete(
        {
            source:
                    function(request, response) { 
                            var idtext = this.element.attr('id');
                            $.ajax({ 
                            url: "/select-data.asp",
                            dataType: "json",
                            
                            data: { 
                                term : request.term,
                                mode : "TBL_DB",
                                field: idtext    
                            }, 
                            
                            success: function(data) { 
                                response(data); 
                            } 
                            
                            }); 
                        }, 
                    
                        minLength: 1,
                        delay: 700,
    
            select: function( event, ui) {
                $("#"+ui.item.idname+"").val( "[" + ui.item.label + "] " + ui.item.actor);
                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>[<strong>" + item.label + "</strong>] " + item.actor + "</a>" )
                .appendTo( ul );
            };        
    });
</script>

Mi funziona quasi tutto, recupero il nome dell'ID della input text, lo passo correttamente alla pagina select-data.asp (che si occupa di fare la query di filtro per l'autocomplete) mi capita solo un'ultima problematica... ovvero il primo input text è perfetto vedo tutto correttamente e seleziono ciò che voglio correttamente, ma dal secondo in avanti vedo solo la parte item.label e non item.actor nell'autocompletamento, se poi lo seziono e lo imposto quindi nella textarea lo vedo corretto.
In pratica mi sono reso conto facendo dei test che dal secondo input text in avanti non "entro" mai dentro questo punto del codice: .data( "autocomplete" )._renderItem = function( ul, item )
Perchè?

[Vindav]

http://api.jquery.com/data/

$( ".nomeclasse" ).each(function(){
    $(this).data("autocomplete")._renderItem= function( ul, item ) { 
            return $( "<li></li>" ) 
                .data( "item.autocomplete", item ) 
                .append( "<a>[<strong>" + item.label + "</strong>] " + item.actor + "</a>" ) 
                .appendTo( ul ); 
            };
    });

[marcopaolo79]

http://api.jquery.com/data/

$( ".nomeclasse" ).each(function(){
    $(this).data("autocomplete")._renderItem= function( ul, item ) { 
            return $( "<li></li>" ) 
                .data( "item.autocomplete", item ) 
                .append( "<a>[<strong>" + item.label + "</strong>] " + item.actor + "</a>" ) 
                .appendTo( ul ); 
            };
    });

Che dire....... GRAZIE !!!