所以我做了一个例子来向你解释你需要做些什么来做更多的输入。
FIDDLE: http: //jsfiddle.net/6wTHK/6/ 不像下面的代码
假设我们有两个inputs
:
<input name="project1" id="searchbox1" placeholder="Cmpt 1"/>
<input name="project2" id="searchbox2" placeholder="Cmpt 2"/>
#searchbox1
它的值是否保存在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
它的值是否保存在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"
}];
现在为每个input
我们添加.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 );
};
而对于第二个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 );
};