places - Jquery campo de autocompletar mĂșltiple
google.maps.places.autocomplete options (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 );
};
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 );