jQuery的自动完成多领域 [英] Jquery multiple autocomplete field
问题描述
我有jQuery的汽车从jQuery网站上完成。这是一个领域的工作就好了。但是现在我要与它不同的值添加不同的领域,我该怎么办呢?我曾尝试几种方法,但搞砸了整个系统。在我的领域都是一个是现在工作1犯规。我需要给它一个新的函数名。我是新在这个事情。
I have the jquery auto complete from the jquery website. it is working just fine for one field. However now I want to add different field with different values in it, how do I do this? I have tried couple of ways but screwed up the whole system. Over all one of my fields is working one doesnt now. do I need to give it a new function name. I am new at this things.
我想通过添加一个新的领域和新的变种在上面它会工作,但它didng
I thought by adding a new field and new var on top it would work but it didng
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 );
推荐答案
所以,我做了一个例子,你需要做的,使更多的投入什么解释了。
So I did an example to explain to you what you need to do to make more inputs.
FIDDLE: http://jsfiddle.net/6wTHK/6/ 不可以作为code以下的
FIDDLE: http://jsfiddle.net/6wTHK/6/ not as in the code below
假设我们有两个输入
:
<input name="project1" id="searchbox1" placeholder="Cmpt 1"/>
<input name="project2" id="searchbox2" placeholder="Cmpt 2"/>
#searchbox1
都有它保存在值VAR projects1
#searchbox1
has it's values saved in the 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
#searchbox2
has it's values saved in the 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"
}];
现在,每一个输入
我们添加了 .autocomplete()
函数;
Now for each input
we add the .autocomplete()
function;
$( "#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 );
};
而对于第二个输入
And for the second 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 );
};
这篇关于jQuery的自动完成多领域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!