Как создать панель поиска, которая выпадает список элементов из базы данных SQL

Question

Как создать панель поиска, как на YouTube или многих других сайтах, которые выполняют поиск в базе данных и отображают только несколько результатов, накладывающихся на остальную часть сайта.

Я уже искал в Google и YouTube учебники и некоторую помощь по поиску в базе данных, а другие - как создать панель поиска. Но по какой-то причине я не могу найти тот, который поможет мне понять, как отображать элементы в раскрывающемся списке, который перекрывает остальную часть страницы и не смещает содержимое. Я также попробовал вас показать CSS: нет; но как только это будет установлено для отображения: блок; например, с помощью javascript содержимое смещается. Заранее спасибо.

Я пытался использовать этот javascript для таблицы:

function search() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
table.style.display = "block";
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
            found = true;
        }
    }
    if (found) {
        tr[i].style.display = "";
        found = false;
    } else if (!tr[i].id.match('^tableHeader')) {
        tr[i].style.display = "none";
    }
}

}

и мой HTML выглядит следующим образом:

        <table id="myTable">
            <tr>
                {% for key, value in list.items() %}
                <td>{{ key|e }</td>
                <td id="name">{{ value|e }}</td>
                <td>
                    <form class="form-signin ajax" action="/signIn" method="post" data-replace="#res" role="form">
                        <input type="checkbox" name="watchlist" value="Watchlist" onclick="writeToCell (this.id)" id="{{ key|e }}">
                    </form>
                </td>
            </tr>
            {% endfor %}
        </table>

Я использую Flask Framework и Python.

Используя display: none; в CSS при загрузке, вы не можете видеть таблицу, а тег h2 находится прямо под ней.

intial

Но когда вы начинаете печатать, таблица смещает тег h2 и остается на экране, даже если он не выбран в строке поиска.

после поиска

Мне бы хотелось, чтобы результаты (из базы данных SQL) появлялись только при поиске чего-либо и не смещали другие элементы. Спасибо.

Answer 1

Просто быстрый пример.Я включил как PHP, так и Node.JS решения с использованием MYSQL.Не забудьте изменить учетные данные базы данных.

Редактировать: Вы только что опубликовали структуру и свой подход.Так что делает этот пост излишним.

HTML

<input type="search" onkeydown="populate(this.value)" value="" />
<ul id="searchResults">

</ul>

JS

function populate(string){
    function insertList(object){
        list = document.getElementById('searchResults');

        for(i = 0; i < object.length; i++){
            item = document.createElement('li');
            item.innerHTML = '<a href="#">' + object[i].columnname + '</a>';
            list.appendChild(item);
        }

        results = document.getElementById('searchResults');
        if(results.childNodes.length == 0){
            results.style.display = 'none';
        }else{
            results.style.display = 'block';
        }
    }

    xhr = new XMLHTTPRequest();
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            insertList(this.responseText)
        }
    }

    xhr.open('POST','/search',true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send('string='+string);
}

CSS

#searchResult {
    display: none;
    width: ; /* I'd make this the same width as your search input */
    position: absolute; /* You can use position: fixed as well*/
    top: ; /* Position this underneath your search input */
    left: ; /* Position this underneath your search input */
}

Сторона сервера - NodeJS

var http = require('http');
var mysql = require('mysql');

var database = mysql.createConnection({
    address: "localhost",
    user: "root",
    password: "",
    database: "database" 
});

database.connect();

http.createServer(function(request, response) {
    sql = "SELECT * FROM tableName WHERE ColumnName = ?";
    data = [request.body.string];
    database.query(sql, data, function(error, results){
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(results);
        response.end()
    });
}).listen(8080);

Сторона сервера - PHP

$con = new mysqli('localhost', 'root', '', 'database');
$sql = "SELECT * FROM tableName WHERE ColumnName = '".$_POST['string']."'";
$result = $con->query($sql);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $rows[] = $r;
}
print json_encode($rows);

Answer 2

Я могу попытаться дать вам общий ответ, так как я не очень хорошо разбираюсь в SQL.Что касается внешнего интерфейса, я бы взял тег select, в который вставляются параметры из псевдо-живой HTML-коллекции, а старые удаляются в том же цикле.Этот список будет постоянно обновляться с ответами баз данных.