从数组中自动补全并获取对应的id

Question

只是想知道是否有人知道一种方法可以在您键入 3 个字母后自动完成输入字段，然后还获取相应值的 ID？

我用 UI Jquery 尝试过这样的事情：它适用于测试阵列，但不适用于我尝试使用的真实阵列。是因为格式不对吗？我在 json_encode 之前和之后包含数组。

var test = ["1899 Hoffenheim vs Borussia Dortmund", "SD Eibar vs Granada CF", "Fiorentina vs AS Roma"];
var availableTags =  <?php echo json_encode($testArray); ?>;
console.log(availableTags);
    $( "#test" ).autocomplete({
    source: test
    });
});

之前json_encode

 Array
    (
        [0] => Array
            (
                [id] => 33820950
                [match] => 1899 Hoffenheim vs Borussia Dortmund
            )

        [1] => Array
            (
                [id] => 33820951
                [match] => SD Eibar vs Granada CF
            )

        [2] => Array
            (
                [id] => 33820952
                [match] => Fiorentina vs AS Roma
            )

        [3] => Array
            (
                [id] => 33820991
                [match] => Hibernian vs Rangers
            )

        [4] => Array
            (
                [id] => 33821044
                [match] => RKC Waalwijk vs FC Twente
            )

        [5] => Array
            (
                [id] => 33821045
                [match] => Middlesbrough vs Stoke City
            )

        [6] => Array
            (
                [id] => 33821108
                [match] => Deportivo La Coruña vs CD Tenerife
            )

        [7] => Array
            (
                [id] => 33821138
                [match] => Zaglebie Lubin vs Legia Warszawa
            )

        [8] => Array
            (
                [id] => 34096342
                [match] => Everton vs Arsenal
            )

        [9] => Array
            (
                [id] => 34096343
                [match] => Aston Villa vs Southampton
            )

    )

json_encode之后

[{"id":"33820950","match":"1899 Hoffenheim vs Borussia Dortmund"},{"id":"33820951","match":"SD Eibar vs Granada CF"},{"id":"33820952","match":"Fiorentina vs AS Roma"},{"id":"33820991","match":"Hibernian vs Rangers"},{"id":"33821044","match":"RKC Waalwijk vs FC Twente"},{"id":"33821045","match":"Middlesbrough vs Stoke City"},{"id":"33821108","match":"Deportivo La Coru\u00f1a vs CD Tenerife"},{"id":"33821138","match":"Zaglebie Lubin vs Legia Warszawa"},{"id":"34096342","match":"Everton vs Arsenal"},{"id":"34096343","match":"Aston Villa vs Southampton"}];

Answer 1

更新：

对不起，我一开始误会你了。我猜您想将键 match 的所有文本值保存到 json 数组中。所以我拿你的$testArray，遍历它并将所有内容分配给一个与格式匹配的新数组。

试试这个：

<?php
$array = [];
$i = 0;
$id = 0;
$ids = '[';
$availableTags = '[';
foreach($testArray as $val) {
   $id[] = "\"".$val[$i]['id']."\"";
   $array[] = "\"".$val[$i]['match']."\"";
   $i++;
}
$id = implode(', ', $id);
$array = implode(', ', $array);
$availableTags .= $array . '];';
$ids = $id . '];';
?>
var availableIds = <?= $ids; ?>
var availableTags = <?= $availableTags; ?>
console.log(availableTags);
    $( "#test" ).autocomplete({
    source: 
       return {
          label: availableTags,
          value: availableIds
       };
    });
});

Answer 2

完成的工作代码。您可以在哪里搜索匹配项，匹配项和相应的 ID 都会被保存。

  <form action="" method="POST" >
      <input id="match_search" name="match_search" onChange="this.form.submit()">
      <input id="match_id" name="match_id" hidden>
    </form>

    <?php
    if (isset($_POST['match_search'])) {
      $match = $_POST['match_search'];
      $match_id = $_POST['match_id'];
      echo $match.'<br>';
      echo $match_id;
    }
    ?>
    <script>
    var availableMatches = <?=json_encode($testArray); ?>;
    $(function() {
        $("#match_search").autocomplete({
            delay: 0,
            source: availableMatches,
            select: function(event, ui) {
                $('#match_search').val(ui.item.label);
                $('#match_id').val(ui.item.value);
                return false;
            },
            focus: function(event, ui) {
                $("#match_search").val(ui.item.label);
                return false;
            }

        });
    });
    </script>

从数组中自动补全并获取对应的id

Autocomplete from array and get the corresponding id

javascript

php

arrays

jquery

jquery-ui