У меня есть javascript (я не эксперт), который возвращает запрос, который я делаю через службу Python, к базе данных Mongodb.
Этот запрос приходит в готовом формате следующим образом
[{ЦЕПЬ: «УЛИЦА ЭЛМ, ЭЛМЕР», КОД: «1234»}, {ЦЕПЬ: «УЛИЦА ЛМ, ЛМАО», КОД: «5678»}]
Решение, которое я увидел, состояло в том, чтобы создать таблицу, которая возвращала этот результат, чтобы показать его пользователю.Я должен сделать пару модификаций:
Один из них - вернуть полный курсор базы данных, пока не вернется только строка, которую я написал в HTML, но в Базе данных я делаю что-то вродевозвращает все строки, которые содержат эту строку.То есть, когда я пишу LM, база данных возвращает предыдущий список, но в HTML я получаю только
{CHAIN: "STREET LM, LMAO", CODE: "5678"}
Второе, что мне нужно сделать, это изменить окно, которое появляется, когда я нажимаю на элемент этой таблицы.Прежде чем нажать на таблицу, я получаю результат
STREET STREET LM, LMAO
, но теперь теперь мне нужно объединить, кроме результата строки,код и показать что-то вроде
УЛИЦА УЛИЦА LM, LMAO 5678
У них будет представление, как я могу это изменить?Я понятия не имею, и я довольно долго не мог понять, как
Это мой код:
<style>
table tr:not(:first-child){
cursor: pointer;transition: all .25s ease-in-out;
}
table tr:not(:first-child):hover{background-color: #ddd;}
table td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
</style>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="cantidad">
Cantidad de elementos sugeridos:
<input type="radio" id="10" name="cant" value="10" checked="checked"> 10
<input type="radio" id="15" name="cant" value="15"> 15
<input type="radio" id="20" name="cant" value="20"> 20
</div>
<div id="country">
Seleccione País:
<select name="pais">
<option value="ARGENTINA" selected="selected">ARGENTINA</option>
<option value="PARAGUAY">PARAGUAY</option>
<option value="URUGUAY">URUGUAY</option>
</select>
</div>
<br>
Ingrese la calle a buscar, la localidad, partido/depto.y provincia en cualquier orden.<br>
Para obtener mejor resultado en la búsqueda, ponga entre comillas los nombres compuestos<br>
Por ejemplo: "san martin", etc.<br>
<input id="CHAIN" type="text" placeholder="ingrese el string para buscar una calle" autocomplete="off" size="80"/>
<table id="table">
<tbody>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
var parsedJSON;
var ex = document.getElementsByName('pais')[0];
function actualiza () {
var selected_pais= ex.options[ex.selectedIndex].text;
var params = {
type: 'POST',
url: 'http://127.0.0.1:5007/suggestStreetName',
//data: JSON.stringify({ "CHAIN": $("#chain").val() }),
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: function (response) {
parsedJSON = JSON.parse(JSON.stringify(response));
$("#table tr").remove();
var tableRef = document.getElementById('table');
for (var i = 0; i < parsedJSON.length; i++) {
var newRow = tableRef.insertRow(0);
var newCell = newRow.insertCell(0);
/*newCell.onclick = function () { tableText(this); };*/
newCell.onclick = function () { tableText(this); };
var newText = document.createTextNode(parsedJSON[i].CHAIN);
var newText2 = document.createTextNode(parsedJSON[i].CODIGO);
newCell.appendChild(newText);
}
console.log(selected_pais);
},
error: function (error) {
console.log(error);
}
};
if ($("#chain").val().length > 0) {
cantidad = "10";
if (document.getElementById('10').checked) {
cantidad = "10";
} else {
if (document.getElementById('15').checked) {
cantidad = "15";
} else {
cantidad = "20";
}
};
if (selected_pais == 'ARGENTINA') {
console.log("Pais en el IF: ",selected_pais);
params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
params.url = 'http://127.0.0.1:5007/suggestStreetName';
}
else if (selected_pais == 'PARAGUAY') {
console.log("Pais en el IF: ",selected_pais);
params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
params.url = 'http://127.0.0.1:5008/suggestStreetName';
}
else if (selected_pais == 'URUGUAY') {
console.log("Pais en el IF: ",selected_pais);
params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
params.url = 'http://127.0.0.1:5009/suggestStreetName'
}
else {
params.data = JSON.stringify({ "CHAIN": $("#chain").val(), "CANTIDAD": cantidad }),
params.url = 'http://127.0.0.1:5007/suggestStreetName'
}
$.ajax(params);
} else {
document.getElementById('table').innerHTML = '';
}
}
$("#chain").keyup(function (e) {
actualiza();
});
$('input[type=radio][name=cant]').change(function() {
console.log('Imprime radio button');
actualiza();
});
$('select[name=pais]').change(function() {
console.log('Imprime pais');
$("#table tr").remove();
$("#chain").val(undefined);
console.log('Limpia Cadena');
actualiza();
});
function tableText(tableCell) {
alert(tableCell.innerHTML);
}
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
}
</script>