Jquery多个自动完成字段

我从jquery网站上获得了jquery auto。 它适用于一个领域。 但是现在我想在其中添加具有不同值的不同字段，我该如何做？ 我尝试了几种方法但搞砸了整个系统。 我的所有领域都在努力工作。 我需要给它一个新的函数名称吗？ 我是新手。

我想通过在顶部添加一个新字段和新的var它可以工作，但它确实有效

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

所以我做了一个例子向你解释你需要做些什么才能做出更多的投入。

FIDDLE： http ： //jsfiddle.net/6wTHK/6/ 不在下面的代码中

可以说我们有两个inputs ：

#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 $( "
" ) .append( "" + item.label + "
" + item.desc + "" ) .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 $( "
" ) .append( "" + item.label + "
" + item.desc + "" ) .appendTo( ul ); };