Jquery多个自动完成字段_Jquery_Html_Autocomplete_Jquery Autocomplete

Jquery多个自动完成字段

jquery html autocomplete

Jquery多个自动完成字段,jquery,html,autocomplete,jquery-autocomplete,Jquery,Html,Autocomplete,Jquery Autocomplete,我在jquery网站上自动完成了jquery。对于一个领域来说，它工作得很好。但是现在我想在其中添加具有不同值的不同字段，我该怎么做？我试过几种方法，但把整个系统搞砸了。在我所有的领域中，有一个正在工作，而另一个现在没有。我需要给它一个新的函数名吗。这方面我是新手我原以为通过在上面添加一个新字段和新var，它会起作用，但没有起作用 var projects = [ { value: "CMPT101", label: "CMPT 101", desc: "Discr

我在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 );

所以我举了一个例子来向您解释需要做些什么才能获得更多的输入

小提琴：不如下代码所示

假设我们有两个

输入

：

<input  name="project1" id="searchbox1" placeholder="Cmpt 1"/>
<input  name="project2" id="searchbox2" placeholder="Cmpt 2"/>

\searchbox2
将其值保存在
var项目2中

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"
}];

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"
    }];

$( "#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 );
        };

现在为每个
输入添加.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 name="project1" id="searchbox1" placeholder="Cmpt 1"/> <input name="project2" id="searchbox2" placeholder="Cmpt 2"/> \searchbox2 将其值保存在var项目2中 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" }]; 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" }]; $( "#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 ); }; 现在为每个输入添加.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 ); }; 你的小提琴有几处打字错误^^无法工作！您缺少一个{ 在JavaScript第65行的小提琴中。您还需要在输入字段中包含jQuery 和jQuery UI 以及ID唯一冲突。它们不能有相同的ID。很抱歉，这家伙。好的，现在已经修复了，谢谢，但是我如何让第二个字段成为一个下拉框，具有完全不同的值？填充第二个var foo=[{yikes:'super'}，…] 并像第一个一样给出所有jquery后面的东西。小提琴中有几个键入错误^^^无法工作！您缺少一个{ 在JavaScript第65行的小提琴中。您还需要在输入字段中包含jQuery 和jQuery UI 以及ID唯一冲突。它们不能有相同的ID。很抱歉，这家伙。好的，现在已经修复了，谢谢，但是我如何让第二个字段成为一个下拉框，具有完全不同的值？填充第二个var foo=[{yikes:'super'}，…] 并在第一篇文章中给出jquery的所有内容。好的，非常感谢，现在让我试试，因为我做过一次，但可能我错过了一些东西。如果我在这里说我爱你可以吗？？？非常感谢，我希望我知道的和你一样多。我想这就是stackOVERflow的意思。也有很多粗鲁的家伙。但有一天他们需要帮助：））是否可以确定下拉框的高度，因此您必须向下滚动才能看到more@codelio有没有可能确定升降箱的高度，这样你就必须向下滚动才能看到更多？好的，非常感谢，让我现在试试，因为我做过一次，但可能我错过了一些东西。如果我在这里说我爱你，可以吗？？？非常感谢，我会的sh我知道的和你一样多我想这就是stackOVERflow的意思。也有很多粗鲁的家伙。但有一天他们需要帮助：））有没有可能确定投币箱的高度，所以你必须向下滚动才能看到more@codelio是否有可能确定下拉框的高度，以便您必须向下滚动才能看到更多内容？