Jquery多个自动完成字段

Question

我有来自 jquery 网站的 jquery 自动完成功能。它在一个领域工作得很好。但是现在我想在其中添加具有不同值的不同字段，我该怎么做？我尝试了几种方法，但搞砸了整个系统。我的所有领域都在工作，但现在却没有。我需要给它一个新的函数名吗？我是这方面的新手。

我认为通过在顶部添加一个新字段和新 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：

<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 );
        };