【问题标题】:Filter Json based on selected item根据所选项目过滤 Json
【发布时间】:2019-12-05 16:25:15
【问题描述】:

我使用了自动完成功能来显示基于 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
            });
        });
    });

谢谢

【问题讨论】:

    标签: php jquery json ajax


    【解决方案1】:

    https://twitter.github.io/typeahead.js/examples/ 更好的是你可以使用 typeahead.js ,它很容易做你想做的事。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-05-09
      • 2018-06-11
      • 2018-04-05
      • 2018-02-24
      • 2019-05-20
      • 1970-01-01
      • 1970-01-01
      • 2014-12-15
      相关资源
      最近更新 更多