从数组中自动完成并获取对应的id

Posted 2023-05-08

【中文标题】从数组中自动完成并获取对应的id

【英文标题】：Autocomplete from array and get the corresponding id

【发布时间】：2020-04-13 06:50:31

【问题描述】：

只是想知道是否有人知道一种方法可以在您键入 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"];

【参考方案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
       ;
    );
);

【讨论】：

谢谢。现在我在控制台中收到 GET 403 (Fobidden) 错误。

现在添加代码，没有错误，但是当我在输入字段中输入时没有任何反应。

php代码后echo $availableTags的结果是[];所以数组没有被添加

当我这样做时它起作用了$test = '['.$array.'];'; 但是我如何获得相关的 id？

，如选择匹配时，也许相关的ID会添加到输入字段的值。可能吗？

【参考方案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>