根据所选项目筛选 Json

Question

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

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

1( 罗姆人 2( 马币 3) 2019-12-04 4( 2018-25-05

并在 #results DIV 中显示它。

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

科穆尼.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，做你想做的事情非常容易和简单。