php - 根据所选项目过滤 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
});
});
});
谢谢
解决方案
https://twitter.github.io/typeahead.js/examples/ 你可以更好地使用 typeahead.js ,做你想做的事情非常容易和简单。
推荐阅读
- twig - 将本地模板变量转换为全局
- flutter - 在 Flutter 中为 ThemeData 添加自定义属性
- database - oracle数据库连接问题
- jhipster - jhipster Keycloak 参数无效:redirect_uri ssl
- excel - Powershell:使用预装功能将 excel 工作表转换为 csv 的脚本
- javascript - 不同订单同时结账,库存有限
- python - Python Pandas 根据条件使用来自另一个数据区域的值填充缺失的邮政编码
- javascript - 通过Javascript为图像随机设置宽度和高度
- java - Trying to understand what's going on for my Java class
- laravel - 返回操作按钮形状的文本数据表 Laravel