jQuery UI 带有属性的自动完成文本

Question

我正在为文本框使用 jQueryUI 自动完成功能。我希望以一种方式填充文本框，以便在文本框自动完成后立即将变量设置为与该特定自动完成选项关联的特定值。

自动完成来源：

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

我认为应该将源转换为 JSON 对象，例如

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

然后选择航空大学时，要设置一个变量为'id'中的值。

代码：

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

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

如何做到这一点？

Answer 1

创建了 jsfiddle 来展示我们如何获取所选选项的 ID。 https://jsfiddle.net/aqbjb5k9/希望这对您有所帮助。

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

jQuery UI 带有属性的自动完成文本

jQuery UI autocomplete text with attribute

javascript

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete