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

时间:2017-02-09 05:17:10

标签: javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

我正在使用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";}....];

然后选择Air university时,应将变量设置为'id'中的值。

代码:

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

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

如何做到这一点?

1 个答案:

答案 0 :(得分: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;
  }
});
});