Search jQuery

jQuery Forum

Using jQuery UI

sbalakri

Pasrsing JSON data for autocomplete

in Using jQuery UI • 3 months ago

Hi,

Referring to the below code, i want to autocomplete on text box with id name with data as the source.

For the autocomplete Label should be displayName and value should be uid.After selecting one of the value corresponfing email id should be populated in the emailid text field.

I am not able to achieve this.Please help

<input type="text" id="name">
<input type="text" id="emailid">
var data={"users":[
{"uid":"123","displayName":"User 123","mail":"123@example.com"},
{"uid":"456","displayName":"User 456","mail":"456@example.com"},
{"uid":"789","displayName":"User 789","mail":"789@example.com"},
]};
$("#name").autocomplete({
source: data,
width: 300,
max: 20,
delay: 100,
minLength: 1,
autoFocus: true,
cacheLength: 1,
scroll: true,
highlight: false,
select: function(event, ui) {
//var selectedObj = ui.item;
}
});

Replies(3)

Kevin B

Re: Pasrsing JSON data for autocomplete

3 months ago

your data should follow this format:

[
{
label: "string",
value: "string"
},
{
label: "string",
value: "string"
}
]

loop through your data and create an array that mimics the above and use that for the autocomplete.

-- Kevin

mike_laird

Re: Pasrsing JSON data for autocomplete

3 months ago

Your data array is more complex than the normal for Autocomplete. I'm not sure it will work in that form. The documentation says "An array of objects with label and value properties:

[ { label: "Choice1", value: "value1" }, ... ]" I'd try a simpler array and get it working. Then if you must, add the "users" and tinker with users[j] j=0 to length kind of code to roll through. It might work, or . . .not?

Working on a simpler array, it would look like

var data = [
{"value":"123","label":"User 123","mail":"123@example.com"},
{"value":"456","label":"User 456","mail":"456@example.com"},
{"value":"789","label":"User 789","mail":"789@example.com"},
]

Your select: option will be along the lines of:

select: function (event, ui){
$("#your_id_4_emailid").val(ui.item.mail);
}

You didn't say whether you are using remote or local data, but it looks like local (included in the javascript), so my comments are along that line.

sbalakri

Re: Pasrsing JSON data for autocomplete

3 months ago

Thanks mike.You soln. works.

I made it work like this.

I am using remote data which i am assigning it to variable data.

<input type="text" id="name">
<input type="text" id="emailid">
var data={"users":[
{"uid":"123","displayName":"User 123","mail":"123@example.com"},
{"uid":"456","displayName":"User 456","mail":"456@example.com"},
{"uid":"789","displayName":"User 789","mail":"789@example.com"},
]};

var finalData =$.map(data.users, function(item) {

     return {
      label:item.displayName,
      value:item.uid,
      mail:item.mail
}

   });

$("#name").autocomplete({
source: finalData,
width: 300,
max: 20,
delay: 100,
minLength: 1,
autoFocus: true,
cacheLength: 1,
scroll: true,
highlight: false,
select: function(event, ui) {
var emailid = ui.item.mail;
var label=ui.item.label;
}
});

Top Reply

Response title

Attachments

jQuery Forum

Pasrsing JSON data for autocomplete

Replies(3)

Re: Pasrsing JSON data for autocomplete

Re: Pasrsing JSON data for autocomplete

Re: Pasrsing JSON data for autocomplete

Statistics

Tags

Actions

Related Posts