Question

我已经使用自动完成功能来显示基于Json文件的选项，您可以在下面看到。现在，我的目标是根据所选项目过滤json文件。

例如：如果我从自动完成输入中选择“ Roma”，则需要显示存储在有关Roma的Json文件中的值：

1）罗姆人 2）RM 3）2019-12-04 4）2018-25-05

并将其显示在#results DIV中。

下面您可以看到我的代码。

comuni.php

    <?php $arr = array(
    array(
        "nomeComune" => "Roma",
        "provincia" => "RM",
        "datasub" => "2019-12-04",
        "datapresub" => "2018-25-05"
    ),
    array(
        "nomeComune" => "Catania",
        "provincia" => "CT",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Milano",
        "provincia" => "MI",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Napoli",
        "provincia" => "NA",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Firenze",
        "provincia" => "FI",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Bologna",
        "provincia" => "BO",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Palermo",
        "provincia" => "PA",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Genova",
        "provincia" => "GE",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Lecce",
        "provincia" => "LE",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ),
    array(
        "nomeComune" => "Udine",
        "provincia" => "UD",
        "datasub" => "2019-12-04",
        "datapresub" => "2019-12-04"
    ));echo json_encode($arr);

html

<div class="input-group">
    <input size="45" name="comuni" id="comuni" class="form-control large-input" type="text" placeholder="Inserisci il nome del tuo Comune">
        <span class="input-group-btn">
            <button class="btn btn-primary large-input">Scopri</button>
        </span>
</div>
<div id="results"></div>

jQuery

$( function() {
        $.getJSON("comuni.php", function(data) {
            autoComplete = [];
            for (var i = 0, len = data.length; i < len; i++) {
                autoComplete.push(data[i].nomeComune);
            }
            $( "#comuni" ).autocomplete({
                source: autoComplete,
                minLength: 2,
                delay: 100
            });
        });
    });

谢谢

Answer 1

https://twitter.github.io/typeahead.js/examples/ 更好的是，可以使用typeahead.js来完成所需的工作，这非常容易和简单。

根据所选项目过滤Json

1 个答案: