Как искать текст из json и отображать его в html?
Я указываю имя проекта из результата json и отображаю его на боковой панели. При нажатии на боковую панель с указанием любого имени проекта отображается его подробная информация. Теперь у меня есть поле поиска для поиска проектов и отображения сведений о проекте, а также для получения имени выбранного проекта на боковой панели.
вот код окна поиска:
<input class = "form-control form-control-dark w-100" type = "text" id = "text" placeholder = "Search" aria-label = "Search">
вот результат json:
"projects": [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
Здесь я буду искать проект, имя или экземпляр и т. д.
вот код, используемый в html:
<div class = "container-fluid">
<div class = "row">
<nav class = "col-md-2 d-none d-md-block bg-light sidebar">
<div id = "projectlist" class = "sidebar-sticky">
<ul class = "nav flex-column nav-pills">
{{range .Projects}}
<li class = "nav-item" >
<a name = "{{.ProjectID}}" class = "nav-link" href = "#">
<img class = "img-fluid" style = "width:8%"
src = "static/image/generic_gcp.png">
{{.Name}}
<div>
<small>
ProjectId: {{.ProjectID}}
</small>
</div>
</a>
</li>
{{end}}
</ul>
<!-- Might need this seperator
<h6 class = "sidebar-heading d-flex justify-content-between align-items-
center px-3 mt-4 mb-1 text-muted">
<span>Savings Reports</span>
</h6>
-->
</div>
</nav>
<main role = "main" class = "col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
{{range .Projects}}
<div id = {{.ProjectID}} class = "d-none justify-content-between flex-wrap
flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
<h1 class = "h2">Project:{{.Name}}</h1>
Как можно просмотреть список для поиска и отобразить сведения о проекте и выбрать их на боковой панели имени этого проекта.
@ לבנימלכה мне нужно и то, и другое
какие данные вы хотите отображать в автозаполнении из json ??
Как вы угрожаете результатам поиска? Выбрать только лучший? Показать список результатов, а затем выбрать из него? Может быть, вы хотите показать сразу все подходящие проекты?
@ לבנימלכה имя и проект, экземпляр
@ לבנימלכה показать список результатов и выбрать из него для подробного отображения
вы можете попробовать w3schools.com/howto/howto_js_autocomplete.asp и пример w3schools.com/howto/tryit.asp?filename=tryhow_js_autocomplet e
@Nirali, как сделать с локальным файлом json?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот автозаполнение из пользовательского интерфейса JQuery:
$( function() {
var projects= [
{
"instances": null,
"name": "decodingideas",
"projectid": "decodingideas-147616",
"projectnumber": 334691107943,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
},
{
"instances": null,
"name": "pupil-workers",
"projectid": "pupil-workers",
"projectnumber": 455648594684,
"orgid": "",
"orgname": "",
"parentid": "",
"parenttype": ""
}
];
$( "#projects" ).autocomplete({
source: function (request, response) {
response($.map(projects, function (value, key) {
return {
label: value.name+" "+ value.projectid,
value: value.projectid
}
}));
},
select: function(event, ui) {
var res= $('#projects').val(ui.item.projectid);
}
});
} ); <link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel = "stylesheet" href = "/resources/demos/style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
SEarch: <input id = "projects"> var url = "";//your url to json file
source: function(request,response)
{
$.get(url, function(data)
{
obj = JSON.parse(data); //parse the data in JSON (if not already)
response($.map(obj, function(value, key)
{
return {
label: value.name+" "+ value.projectid,
value: value.projectid
}
}));
}
}
как я могу показать результат без объявления проектов var из json. мое имя файла json default.json?
вы должны сделать это с помощью ajax
Как загрузить локальный файл json
попробуйте написать в URL-адресе ваш файл json loction
как я могу использовать этот код $ (function () {$ .ajax ({url: "/path/to/cache.json", dataType: "json", data: {term: request.term}, success: function ( data) {var cat_data = $ .map (data, function (item) {return {label: item.label, category: item.category, desc: item.desc};}); $ ("# searchfield"). catcomplete ({задержка: 0, источник: cat_data, минимальная длина: 0});}});});
Это нормально работает, но выбранный проект не отображается
см. здесь stackoverflow.com/questions/12722891/…
на самом деле я никогда не делал этого раньше Это мой первый раз я сделал это Только для вас
$ (function () {$ .ajax ({url: "/path/to/cache.json", dataType: "json", data: {term: request.term}, success: function (data) {var cat_data = $ .map (data, function (item) {return {label: item.label, category: item.category, desc: item.desc};}); $ ("# searchfield"). catcomplete ({delay: 0, источник: cat_data, minlength: 0});}});}); как использовать этот код
Вы имеете в виду, что хотите автозаполнение или введите поисковый запрос и отобразите результат ??