places - Jquery campo de autocompletar múltiple

google.maps.places.autocomplete options

Question

Tengo el jquery autocompletado del sitio web de jquery. está funcionando bien para un campo. Sin embargo, ahora quiero agregar un campo diferente con diferentes valores, ¿cómo puedo hacer esto? Lo intenté de varias maneras, pero arruiné todo el sistema. Sobre todo uno de mis campos está funcionando, uno no lo hace ahora. ¿Debo darle un nuevo nombre de función? Soy nuevo en esto.

Pensé que al agregar un nuevo campo y una nueva var en la parte superior funcionaría, pero no funcionó

var projects = [
{
value: "CMPT101",
label: "CMPT 101",
desc: "Discrete Mathematics I"
},
var instr={
value:"johnson "
lable:"Johnson"
}
]
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#instr" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

http://jsfiddle.net/6wTHK/4/

Answer 1

Así que hice un ejemplo para explicarte lo que tienes que hacer para hacer más aportaciones.

FIDDLE: http://jsfiddle.net/6wTHK/6/ no como en el siguiente código

Digamos que tenemos dos inputs :

<input name="project1" id="searchbox1" placeholder="Cmpt 1"/>
<input name="project2" id="searchbox2" placeholder="Cmpt 2"/>

#searchbox1 tiene sus valores guardados en var projects1

var projects1 = [
{
value: "CMPT101",
label: "CMPT 101",
desc: "Discrete Mathematics I"
},
{
value: "CMPT102",
label: "CMPT 102",
desc: "Discrete Mathematics II"
},
{
value: "CMPT103",
label: "CMPT 103",
desc: "Discrete Mathematics III"
}];

#searchbox2 tiene sus valores guardados en var projects2

var projects2 = [
{
value: "CMPT104",
label: "CMPT 105",
desc: "Discrete Mathematics IV"
},
{
value: "CMPT106",
label: "CMPT 106",
desc: "Discrete Mathematics V"
},
{
value: "CMPT107",
label: "CMPT 107",
desc: "Discrete Mathematics VI"
}];

Ahora para cada input agregamos la función .autocomplete() ;

 $( "#searchbox1" ).autocomplete({ //change #searchbox2 to your input id
minLength: 0,
source: projects1, //change here the source of your values
focus: function( event, ui ) {
$( "#searchbox1" ).val( ui.item.label );
//you had more stuff here
return false;
},
select: function( event, ui ) {
$( "#searchbox1" ).val( ui.item.label );
//you had more stuff here
return false;
},
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};

Y para la segunda input

$( "#searchbox2" ).autocomplete({ //change #searchbox2 to your input id
minLength: 0,
source: project2, //change here the source of your values
focus: function( event, ui ) {
$( "#searchbox2" ).val( ui.item.label );
//you had more stuff here
return false;
},
select: function( event, ui ) {
$( "#searchbox2" ).val( ui.item.label );
//you had more stuff here
return false;
},
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};