Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Question

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Is there a way to create a search bar similar to those seen on popular websites like YouTube, where the search results overlay the rest of the page without displacing any content? I've searched extensively on Google and YouTube for tutorials on database searching and search bar creation, but I haven't found one that addresses displaying search results in a dropdown without affecting other elements on the page. Even attempting to use CSS display: none; along with JavaScript to show the results ends up displacing content. Any help or guidance would be greatly appreciated.

I've tried implementing this JavaScript code for searching through a table:

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";
    }
}

}

And my HTML structure is as follows:

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

I am working within the Flask framework using Python as well.

Initially, I used display: none; in CSS to hide the table, resulting in the h2 tag being displayed below it.

Initial State

However, upon typing in the search bar, the table contents displace the h2 tag, remaining on-screen even when not actively selected. This is not the behavior I want when interacting with SQL database results. Any suggestions on how to prevent this displacement issue are welcome. Thank you.

javascript html css search dropdown

Answer 1

Answer №1

While I don't claim to be an SQL expert, I can offer a basic solution. On the front end, you could use a select tag that populates options from a pseudo-live HTML collection and removes old ones in the process. This list would then continuously update with responses from the database.

Answer 2

While I don't claim to be an SQL expert, I can offer a basic solution. On the front end, you could use a select tag that populates options from a pseudo-live HTML collection and removes old ones in the process. This list would then continuously update with responses from the database.

Answer 3

Answer №2

Here's a brief example showcasing PHP and Node.JS solutions with MYSQL integration. Don't forget to update the database credentials.

Edit: Your framework and approach have been shared in another post, making this one somewhat redundant.

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: ; /* Adjust to match your search input's width */
    position: absolute; /* Can also use position: fixed */
    top: ; /* Position below your search input */
    left: ; /* Position below your search input */
}

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

Server Side - 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 4

Here's a brief example showcasing PHP and Node.JS solutions with MYSQL integration. Don't forget to update the database credentials.

Edit: Your framework and approach have been shared in another post, making this one somewhat redundant.

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: ; /* Adjust to match your search input's width */
    position: absolute; /* Can also use position: fixed */
    top: ; /* Position below your search input */
    left: ; /* Position below your search input */
}

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

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

Creating a dynamic search feature that displays results from an SQL database with a dropdown box

Answer №1

Answer №2

Similar questions

Error encountered with Protractor: 'TypeError: undefined is not a function'

Typescript Angular2 filtering tutorial

Create a separate server session specifically for handling an ajax request?

What is the best way to extract text from a dynamically changing element using jQuery?

Tips for enabling both vertical and horizontal scrolling using the mousewheel on a webpage

In JavaScript, a true statement does not trigger a redirect

Element eradicated by mysterious force - what is the reason behind this destruction?

Create a layout consisting of two rows, each containing three blocks. Ensure that the layout is responsive by using only HTML and CSS, without relying

Enhancing a node.js application with express()

Creating an ImmutableJS Record with custom types: A step-by-step guide

Why is it that when I store a DOM element reference in a JavaScript Array, I cannot reuse that stored reference to add an event listener

Guide to activating a reaction following an occurrence in a React component

Encountering the error message "Uncaught Error: [vuex] Getters must be functions, but 'getters.getters' is {}. This occurred while splitting the Vuex store into modules in Vue.js."

React Redux Loading progress bar for seamless navigation within React Router

Updating a property in React by fetching data from API and storing it in the cache

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

Clear SELECT After Submission

Passing a list of objects containing lists in MVC3

Enhancing arrow cone spin with ThreeJs

Struggling with JavaScript's getElementById function