如何创建从 SQL 数据库中下拉项目列表的搜索栏

Question

如何在 youtube 或许多其他网站上创建搜索栏，以搜索数据库并仅显示覆盖网站其余部分的少数结果。

我已经在 google 和 youtube 上搜索了教程和搜索数据库的一些帮助，以及如何创建搜索栏的其他帮助。但是由于某种原因，我找不到一个可以帮助我弄清楚如何在覆盖页面其余部分且不取代内容的下拉列表中显示项目的方法。我也试过 CSS display: none;但是一旦设置为显示：块；例如，使用 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 框架和 python。

在 CSS 中使用 display: none; 加载时看不到表格，并且 h2 标记位于其正下方。

intial

但是，当您开始在表格中输入时，h2 标记会被替换并保留在屏幕上，即使在搜索栏上未选择时也是如此。

after search

我想要它，这样结果（来自 SQL 数据库）只会在搜索某些内容时弹出，并且不会取代其他元素。谢谢。

Answer 1

我可以试着给你一个一般性的答案，因为我对 SQL 不是很精通。就前端而言，我将采用一个选择标签，该标签从伪实时 html 集合中获取选项，并在同一个循环中删除旧的选项。然后，该列表将随着数据库的响应不断更新。

Answer 2

只是一个简单的例子。我已经包含了使用 MYSQL 的 PHP 和 Node.JS 解决方案。 记得更改数据库凭据。

编辑：您刚刚发布了框架和方法。所以这篇文章有点多余。

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);