Jquery multiple autocomplete field

Question

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.

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

http://jsfiddle.net/6wTHK/4/

there are several typing errors in your fiddle ^^ can't work! — Ol Sen
– Ol Sen, Commented Apr 12, 2013 at 19:07
you are missing a { in your fiddle at JavaScript line 65. You also need to include jQuery and jQuery UI — Spokey
– Spokey, Commented Apr 12, 2013 at 19:08
also ID unique violation in your input fields. they cant have the same id. — Ol Sen
– Ol Sen, Commented Apr 12, 2013 at 19:19
Sorry about that guys. okay its been fixed now thanks but how do I get the second field to become a drop box, with tottaly different values? — benzo
– benzo, Commented Apr 12, 2013 at 19:19
fill a second var foo =[{ yikes:'super' }, ..] and also give all jquery things behind like in the first one. — Ol Sen
– Ol Sen, Commented Apr 12, 2013 at 19:24

Spokey · Accepted Answer · 2013-04-12 19:35:57Z

1

So I did an example to explain to you what you need to do to make more inputs.

FIDDLE: http://jsfiddle.net/6wTHK/6/ not as in the code below

Lets say we have two inputs :

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

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

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

answered Apr 12, 2013 at 19:35

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

benzo Over a year ago

okay thank you so much, let me try this now, bc I did it once but maybe I missed stuff

benzo Over a year ago

Is it okay if I say I love you here ??? thank you so much, I wish I knew as much as you did

Ol Sen Over a year ago

i think thats what stackOVERflow means. there are a lot of rude dudes also. but one day they need help :))

benzo Over a year ago

is it possible to make height of the drop box certain, so you have to scroll down to see more

benzo Over a year ago

@codelio is it possible to make height of the drop box certain, so you have to scroll down to see more ?

|

Collectives™ on Stack Overflow

Jquery multiple autocomplete field

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related