首页 > 解决方案 > 根据所选项目过滤 Json

问题描述

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

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

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
            });
        });
    });

谢谢

标签: phpjqueryjsonajax

解决方案


https://twitter.github.io/typeahead.js/examples/ 你可以更好地使用 typeahead.js ,做你想做的事情非常容易和简单。


推荐阅读