JS 自动完成 - 访问标签值

Question

我有一个显示标签的自动完成表单框，然后在 selected 后插入一个值。一旦提交，我想使用部分标签 (client_id) 构成表单 post 的一部分。

JS：

<script type="text/javascript">
$(function() {
 $( "#clientsearch" ).autocomplete({
  source: 'backend_search_addressWT.php',
  minLength: 2, 

  select: function (event, ui) {
    return showUser(ui.item.value)
    },

    change: function (event, ui) {
      return showUser(ui.item.value);
    },
 });
});
</script>

backend_search_addressWT.php

<?php
    require_once 'config.php';

    //get search term
    $searchTerm = $_GET['term'];

    //get matched data from skills table
    $query = $mysqli->query("SELECT * FROM client WHERE client_address LIKE '%".$searchTerm."%'");
    while ($row = $query->fetch_assoc()) {
        $data[] = array (
            'label' => $row['client_address'].' - '.$row['client_name'].' - '.$row['client_id'],
            'value' => $row['client_address'],
            'value2' => $row['client_id'],
            );
    }

    //return json data
    echo json_encode($data);
?>

我试过将它添加到 js 中，但无济于事：

<script type="text/javascript">
$(function() {
 $( "#clientsearch" ).autocomplete({
  source: 'backend_search_addressWT.php',
  minLength: 2, 

  select: function (event, ui) {
    return showUser(ui.item.value);
    var label = (ui.item.label).split('-')
    var client_id = label[2]
    $('#hiddenID').client_id
    },

    change: function (event, ui) {
      return showUser(ui.item.value);
    },
 });
});
</script>

请注意，我已经在值 ui 上使用了 select 回调。

如何访问标签？

Answer 1

在您的 select() 方法中，您在 return 语句之后添加了代码：

select: function (event, ui) {
return showUser(ui.item.value);
var label = (ui.item.label).split('-')
var client_id = label[2]
$('#hiddenID').client_id
}

这些行永远不会被执行。

您希望 $('#hiddenID').client_id 为您做什么？这很可能什么也得不到，因为它会寻找一个（可能不存在的）属性的 jquery 元素，然后再次丢弃该元素。

改为（已编辑）:

将标签处理指令放在 return 语句之前，看看会发生什么。也许首先在控制台中显示标签，然后将其放入隐藏的输入字段：

select: function (event, ui) {
  console.log(ui.item.label); // just to make sure there is something to process ...
  $('#hiddenID').val(ui.item.label.split(' - ').pop());   // to place the last portion 
                 // of the label in that hidden element (assuming it is an input field)
  return showUser(ui.item.value);
}

.split(' - ').pop() 将仅 return 标签字符串的最后一个元素（假设组件由 ' - ' 字符串分隔）。

JS 自动完成 - 访问标签值

JS Autocomplete - access label value

javascript

php

jquery

jquery-ui-autocomplete