jQuery UI completamento automatico con articolo e id

Question

Ho il seguente script che funziona con un array 1 dimensionale. È possibile farlo funzionare con un array bidimensionale? Quindi, qualunque sia l'elemento selezionato, facendo clic su un secondo pulsante sulla pagina, dovrebbe visualizzare l'id di qualsiasi oggetto selezionato.

Questo è lo script con l'array 1 dimensionale:

var $local_source = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]; 
$("#txtAllowSearch").autocomplete({ 
    source: $local_source 
}); 

Questo è lo script per il pulsante per controllare l'ID, che è incompleto:

$('#button').click(function() { 
    // alert($("#txtAllowSearch").someone_get_id_of_selected_item); 
}); 

Answer 1

È necessario utilizzare l'interfaccia utente .item.label (il testo) e ui.item.value (l'id) proprietà

$('#selector').autocomplete({ 
    source: url, 
    select: function (event, ui) { 
     $("#txtAllowSearch").val(ui.item.label); // display the selected text 
     $("#txtAllowSearchID").val(ui.item.value); // save selected id to hidden input 
    } 
}); 

$('#button').click(function() { 
    alert($("#txtAllowSearchID").val()); // get the id from the hidden input 
}); 

[Edit] È inoltre chiesto come creare il multi-dimensionale serie ...

si dovrebbe essere in grado di creare l'array in questo modo:

var $local_source = [[0,"c++"], [1,"java"], [2,"php"], [3,"coldfusion"], 
        [4,"javascript"], [5,"asp"], [6,"ruby"]]; 

Per saperne di più su come lavorare con array multidimensionali qui: http://www.javascriptkit.com/javatutors/literal-notation2.shtml

Answer 2

Dalla scheda Panoramica dei plugin jQuery completamento automatico:

I dati locali può essere un semplice array di stringhe , oppure contiene oggetti per ogni elemento dell'array, con un'etichetta o una proprietà di valore o entrambi. La proprietà dell'etichetta viene visualizzata nel menu di suggerimento . Il valore sarà inserito nell'elemento di input dopo l'utente ha selezionato qualcosa dal menu . Se una sola proprietà è specificata , verrà utilizzata per entrambi, ad es. . se si forniscono solo le proprietà valore , il valore corrisponderà anche a come etichetta.

Quindi la matrice "bidimensionale" potrebbe apparire come:

var $local_source = [{ 
    value: 1, 
    label: "c++" 
}, { 
    value: 2, 
    label: "java" 
}, { 
    value: 3, 
    label: "php" 
}, { 
    value: 4, 
    label: "coldfusion" 
}, { 
    value: 5, 
    label: "javascript" 
}, { 
    value: 6, 
    label: "asp" 
}, { 
    value: 7, 
    label: "ruby" 
}]; 

È possibile accedere alle proprietà dell'etichetta e valore all'interno focus e select evento attraverso l'argomento ui utilizzando ui.item.label e ui.item.value.

Modifica

Sembra che bisogna "cancellare" la messa a fuoco e selezionare gli eventi in modo che esso non pone i numeri di ID all'interno delle caselle di testo. Mentre lo fai puoi invece copiare il valore in una variabile nascosta. Here is an example.

Answer 3

<script type="text/javascript"> 
$(function() { 
    $("#MyTextBox").autocomplete({ 
     source: "MyDataFactory.ashx", 
     minLength: 2, 
     select: function (event, ui) { 
      $('#MyIdTextBox').val(ui.item.id); 
      return ui.item.label; 
     } 
    }); 
}); 

Le risposte di cui sopra ha aiutato, ma, non ha funzionato nella mia implementazione. Invece di usare il valore usando jQuery, sto restituendo il valore dalla funzione all'opzione select.

MyDataFactory.la pagina ashx ha una classe con tre proprietà Id, Label, Value.

Passare l'elenco nel serializzatore JavaScript e restituire la risposta.

Answer 4

Il mio codice ha funzionato solo quando ho aggiunto "return false" alla funzione select. Senza questo, l'input è stato impostato con il valore corretto all'interno della funzione select e quindi è stato impostato sul valore id dopo che la funzione select era terminata. Il ritorno falso ha risolto questo problema.

$('#sistema_select').autocomplete({ 

    minLength: 3, 
    source: <?php echo $lista_sistemas;?> , 
    select: function (event, ui) { 
     $('#sistema_select').val(ui.item.label); // display the selected text 
     $('#sistema_select_id').val(ui.item.value); // save selected id to hidden input 
     return false; 
    }, 
    change: function(event, ui) { 
     $("#sistema_select_id").val(ui.item? ui.item.value : 0); 
    } 
}); 

Inoltre, ho aggiunto una funzione per l'evento di modifica perché, se l'utente scrive qualcosa in ingresso o cancella una parte dell'etichetta oggetto dopo un elemento è stato scelto, ho bisogno di aggiornare il campo nascosto in modo che non ho l'id sbagliato (obsoleto). Per esempio, se la mia fonte è:

var $local_source = [ 
     {value: 1, label: "c++"}, 
     {value: 2, label: "java"}] 

e il tipo ja utente e selezionare l'opzione 'Java' con il completamento automatico, ho memorizzare il valore 2 nel campo nascosto. Se l'utente cancella una lettera da 'java', per esempio terminando con 'jva' nel campo di input, non posso passare al mio codice l'id 2, perché l'utente ha cambiato il valore. In questo caso ho impostato l'ID su 0.

Answer 5

Voglio solo condividere ciò che ha funzionato sul mio fine, nel caso in cui fosse in grado di aiutare anche qualcun altro. In alternativa in base alla risposta del Paty Lustosa sopra, mi permetta di aggiungere un altro approccio derivato da questo sito in cui ha usato un approccio Ajax per il metodo fonte

http://salman-w.blogspot.ca/2013/12/jquery-ui-autocomplete-examples.html#example-3

Il calciatore è la risultante "stringa" o formato JSON da lo script php (listing.php sotto) che deriva il set di risultati da visualizzare nel campo di completamento automatico deve seguire qualcosa di simile:

{"list":[ 
    {"value": 1, "label": "abc"}, 
    {"value": 2, "label": "def"}, 
    {"value": 3, "label": "ghi"} 
    ]} 

Poi sulla porzione di source del metodo di completamento automatico:

source: function(request, response) { 
     $.getJSON("listing.php", { 
      term: request.term 
     }, function(data) {      
      var array = data.error ? [] : $.map(data.list, function(m) { 
       return { 
        label: m.label, 
        value: m.value 
       }; 
      }); 
      response(array); 
     }); 
    }, 
    select: function (event, ui) { 
     $("#autocomplete_field").val(ui.item.label); // display the selected text 
     $("#field_id").val(ui.item.value); // save selected id to hidden input 
     return false; 
    } 

Spero che questo aiuti ... tutto il meglio!

Answer 6

Non penso che sia necessario modificare il valore e le proprietà dell'etichetta, utilizzare campi di input nascosti o sopprimere gli eventi. È possibile aggiungere la propria proprietà personalizzata a ciascun oggetto di completamento automatico e quindi leggere il valore di tale proprietà in un secondo momento.

Ecco un esempio.

$(#yourInputTextBox).autocomplete({ 
    source: function(request, response) { 
     // Do something with request.term (what was keyed in by the user). 
     // It could be an AJAX call or some search from local data. 
     // To keep this part short, I will do some search from local data. 
     // Let's assume we get some results immediately, where 
     // results is an array containing objects with some id and name. 
     var results = yourSearchClass.search(request.term); 

     // Populate the array that will be passed to the response callback. 
     var autocompleteObjects = []; 
     for (var i = 0; i < results.length; i++) { 
      var object = { 
       // Used by jQuery Autocomplete to show 
       // autocomplete suggestions as well as 
       // the text in yourInputTextBox upon selection. 
       // Assign them to a value that you want the user to see. 
       value: results[i].name; 
       label: results[i].name; 

       // Put our own custom id here. 
       // If you want to, you can even put the result object. 
       id: results[i].id; 
      }; 

      autocompleteObjects.push(object); 
     } 

     // Invoke the response callback. 
     response(autocompleteObjects); 
    }, 
    select: function(event, ui) { 
     // Retrieve your id here and do something with it. 
     console.log(ui.item.id); 
    } 
}); 

Il documentation menzioni è necessario passare in un array di oggetti con etichette e di valori proprietà. Tuttavia, è possibile passare oggetti con in più rispetto a queste due proprietà e leggerle in un secondo momento.

Questa è la parte pertinente a cui mi riferisco.

Array: un array può essere utilizzato per i dati locali. Sono disponibili due formati supportati: Un array di stringhe: ["Choice1", "Choice2"] Un array di oggetti con proprietà label e value: [{label: "Choice1", valore: "value1"}, .. .] La proprietà label è visualizzata nel menu suggerimento . Il valore verrà inserito nell'elemento di input quando un utente seleziona un elemento. Se viene specificata una sola proprietà, verrà utilizzata per entrambi, ad es., , ad es., se si forniscono solo proprietà valore, il valore sarà anche come etichetta.

Answer 7

Questo può essere fatto senza l'uso del campo nascosto. Devi sfruttare l'abilità di JQuerys per creare attributi personalizzati in fase di esecuzione.

('#selector').autocomplete({ 
    source: url, 
    select: function (event, ui) { 
     $("#txtAllowSearch").val(ui.item.label); // display the selected text 
     $("#txtAllowSearch").attr('item_id',ui.item.value); // save selected id to hidden input 
    } 
}); 

$('#button').click(function() { 
    alert($("#txtAllowSearch").attr('item_id')); // get the id from the hidden input 
}); 

Answer 8

Finalmente ho fatto Grazie mille amici, e un ringraziamento speciale a Mr https://stackoverflow.com/users/87015/salman-a a causa del suo codice sono stato in grado di risolvere in modo corretto. finalmente il mio codice è alla ricerca come questo, come io sto usando graal groove Spero che questo vi aiuterà qualcuno là .. Grazie mille

codice html appare così nella mia pagina gsp

<input id="populate-dropdown" name="nameofClient" type="text"> 
    <input id="wilhaveid" name="idofclient" type="text"> 

Funzione script è come questo in la mia pagina GSP

<script> 
     $("#populate-dropdown").on('input', function() { 
      $.ajax({ 
       url:'autoCOmp', 
       data: {inputField: $("#populate-dropdown").val()}, 
       success: function(resp){ 
        $('#populate-dropdown').autocomplete({ 
         source:resp, 
         select: function (event, ui) { 
          $("#populate-dropdown").val(ui.item.label); 
          $("#wilhaveid").val(ui.item.value); 
          return false; 
         } 
        }) 
       } 
      }); 
     }); 
    </script> 

E il mio codice di controllo è come questo

def autoCOmp(){ 
    println(params) 
    def c = Client.createCriteria() 
    def results = c.list { 
     like("nameOfClient", params.inputField+"%") 
    } 

    def itemList = [] 
    results.each{ 
     itemList << [value:it.id,label:it.nameOfClient] 
    } 
    println(itemList) 
    render itemList as JSON 
} 

Un'altra cosa che non ho impostato il campo ID nascosto perché all'inizio stavo controllando che sto ottenendo l'id esatto, puoi tenerlo nascosto semplicemente inserisci type = nascosto invece del testo per il secondo elemento di input in html

Grazie!

Answer 9

Ho provato sopra la visualizzazione del codice (valore o ID) nella casella di testo del testo Etichetta. Dopo di che ho provato event.preventDefault() è perfettamente funzionante ...

var e = [{"label":"PHP","value":"1"},{"label":"Java","value":"2"}] 

$(".jquery-autocomplete").autocomplete({ 
    source: e,select: function(event, ui) { 
     event.preventDefault(); 
     $('.jquery-autocomplete').val(ui.item.label); 
     console.log(ui.item.label); 
     console.log(ui.item.value); 
    } 
}); 

Answer 10

Supponendo che gli oggetti nella vostra matrice di origine hanno una proprietà id ...

var $local_source = [ 
    { id: 1, value: "c++" }, 
    { id: 2, value: "java" }, 
    { id: 3, value: "php" }, 
    { id: 4, value: "coldfusion" }, 
    { id: 5, value: "javascript" }, 
    { id: 6, value: "asp" }, 
    { id: 7, value: "ruby" }]; 

Entrare in possesso della corrente l'istanza e l'ispezione della proprietà selectedItem consentiranno di recuperare le proprietà dell'elemento attualmente selezionato. In questo caso avvisare l'id dell'elemento selezionato.

$('#button').click(function() { 
    alert($("#txtAllowSearch").autocomplete("instance").selectedItem.id; 
});