如何在自动完成 JQuery UI 中获取所选行的 ID

Question

我想在 autocomplete 函数中获取所选项目的行 ID，我从 php 变量中获取源的值。

<script>
    $(function() {
        var availableTags = [ <? php echo($toto); ?> ];
        $("#foo").autocomplete({
            source: availableTags
        });
    });
</script>

我已经尝试过这个功能，但它似乎不起作用。事实上，当我将它添加到我的脚本时，我的 autocomplete 将不再起作用。

<script>
    $(function () {
        var availableTags = [ <? php echo($ListeNomsFormateeFinale); ?> ];
        $("#nomClient").autocomplete({
            source: availableTags
            select: function (event, ui) {
                $("#textfield1").val(ui.item.label); // display the selected text
                $("#textfield2").val(ui.item.value); // display selected id
                return false;
            }
        });
    });
</script>

我在这里做错了什么？有没有快速解决这个问题的方法？

编辑：

我实际上需要在source: availableTags之后添加一个逗号，我还删除了return false。但它不会返回所选行的 id，它实际上在 textfield1 和 textfield2 两个文本字段中写入相同的值

Answer 1

发件人：Api Jquery UI - Autocomplete - option source

数组：数组可用于本地数据。有两种支持的格式：

1. 一个字符串数组：[ "Choice1", "Choice2" ]

2. 具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ] 标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，则该值也将用作标签。

第二点 (2.) 提供了一种存储所选对象的“id”（或其他内容）的方法。举例：

var yourSource = [ { label: "Choice1", id: "id1" } ];

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<form>
  <input type="text" id="fooInput" />
</form>
<div id="result">
</div>


<script type="text/javascript">
  var yourSource = [
  {
    label: "A",
    id: "id1"
  }, 
  {
    label: "B",
    id: "id2"
  }];

  $("#fooInput").autocomplete({
    source: yourSource,
    select: function(event, ui) {
      var e = ui.item;
      var result = "<p>label : " + e.label + " - id : " + e.id + "</p>";
      $("#result").append(result);
    }
  });
</script>

所以尝试像这样格式化您的数据源： var source = [ {label:"Foo", id:"1"}, ... ];