jQuery UI autocomplete text with attribute

Question

I am using the jQueryUI autocomplete for a textbox. I want the textbox to be filled in a way that as soon as the textbox is autocompleted, a variable should be set to a particular value associated with that particular autocomplete option.

Source for autocomplete:

var availableTags = ["Air University","Alabama A&M University",
"Alabama State University","Athens State University",...];
//list very long, 2000+

I think the source should be converted as a JSON object such as

[{ "id":"1", "name":"Air university";}....];

And then when Air university is selected, a variable should be set to the value in 'id'.

Code:

 $( "#tags" ).autocomplete({
  source: function(request, response) {
    var results = $.ui.autocomplete.filter(availableTags, request.term);

    response(results.slice(0, 10));
},
  minLength:5
});

How can this be done?

Ranjana · Accepted Answer · 2017-02-09 05:31:45Z

1

Created jsfiddle to show how we can get the id of selected option. https://jsfiddle.net/aqbjb5k9/ Hope this helps.

$( function() {
var availableTags = [
  {
    value: "Air University",
    id: "1"
  },
  {
    value: "Alabama A&M University",
    id: "2"
  },
  {
    value: "Alabama State University",
    id: "3"
  }
];
$( "#tags" ).autocomplete({
  source: availableTags,
  select: function( event, ui ) {
    var result_selected = ui.item.id;
    alert(result_selected );     
    return false;
  }
});
});

answered Feb 9, 2017 at 5:31

Ranjana

8255 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI autocomplete text with attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related