Pre-visualize search and show div when scrolling up

Hi everyone,

I wanted to add to my webpage two functionalities:

1. Show a pre-visualization of the search

The first is to previsualize the search in the search-box as you introduce a letter. I have been searching information and also found it, but not working the code. It would be helpful a tutorial (if you know where I can find one) in a video.

I would like to do something like steam search-bar. It´s wonderful:

2. Show div when scrolling up

As in movil resolution, the scroll to huge, I would like to introduce a function to show the div “menu”, so that you don´t need to scroll up again to use de menu bar.

I have also found information about this functionality, but I doesn´t work. I assume that both require javascript, and my knowledge in this language is too low.

Thanks in advice!

I’m not sure either of these will be achieved with php. It sounds more like the work of javascript.
For the search, anything that reacts to user input without a page refresh will require client-side scripting. Though the retrieval of results will require some server-side integration with the client-side.

For the menu, that sounds like a “sticky” menu. There is the new css position: sticky property for this, but it’s not yet universally supported in major browsers, so will probably still require javascript to work everywhere. Unless you just want a fixed menu, that can be done with pure css.

Topic moved to Javascript

To do this first you must have a database with the elements that the users are going to search.E.g names of the games,etc…
Second you must create an input element for the search results and into this input element bound the JQuery keyup function with an ajax call.eg
$(‘input’).keyup(function() {
$.ajax({url: “demo_test.php”, success: function(result){
$(“input”).html(result);
};
};
then in your demo_test.php you must write a php query with a query smothing like this
$connection_to_database(…);
$query="SELECT * FROM table WHERE column=(there use the clause LIKE)
$result=mysqli_query(…);
.
.

echo "<select>";
echo  "<option value="$something">$something</option>";
echo "</select>";

As (i hope) understand you make a request via ajax into demo_test.php file to triger the php query and then the echo result returns via ajax and gets by input element.

Thanks for your both responds!

I have a database, but the problem is that I don´t really understand the javascript code. What I have tried is the following:

The form code for the search:

        <form class="busqueda" action="busqueda.php" method="get">
            <input type="text" name="busqueda" id="busqueda" placeholder="Buscar un juego..." autocomplete="off" onKeyUp="buscar();" >
            <button type="submit" name="button" class="fa fa-search"></button>
        </form>
        <div id="resultadoBusqueda"></div> //Here is where it should show all the results.

In the javascript I have:

	$("#resultadoBusqueda").html('<p>JQUERY VACIO</p>'); //just when you load the page.

	function buscar() {
		var busqueda = $(input#busqueda).val();

		if (busqueda != "") {
			$.post("buscar.php", {valorBusqueda: textoBusqueda}, function(mensaje) {
				$("#resultadoBusqueda").html(mensaje);
			});
		} else {
			$("#resultadoBusqueda").html('<p>JQUERY VACIO</p>'); //in case the ir no result.
		};
	};

And then the php file, where it makes all the logic:

<?php

try {
    $conexion = new PDO('mysql:host=localhost;dbname=XboxOne', 'root', '');
} catch (PDOException $e) {
    header ('Location: error.php');
    echo "ERROR: ". $e->getMessage();
    die();
}

$consultaBusqueda = $_POST['valorBusqueda'];

//Filtro anti-XSS
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

$mensaje = "";

if (isset($consultaBusqueda)) {

    $statement = $conexion->prepare('SELECT  * FROM listado_precios WHERE titulo LIKE :busqueda');
    $statement->execute(array(':busqueda' => "%$busqueda%"));
    $juegos = $statement->fetchAll();

    if (count($juegos) == 0) {
        $mensaje .= "No se ha encontrado ninguna coincidencia";
    } else {
        foreach ($juegos as $post) {
            $caratula = $post['thumb'];
            $titulo = $post['titulo'];
        }

        $mensaje .=

        "<div>". $caratula . "</div>";
        "<p>" . $titulo . "</p>";


        }
    }

echo $mensaje;

But nothing happens…I don´t know if I have logical problems, could be, because the autocompleting keeps working when I have dissabled in the code. Do not really understand.

It´s taken from the unique example but adapted to my code, and nothing, even bad, keeps doing the same. What I would like to obtain is that when you introduce a letter automatically show de games that are like the word written in the search box.

Thanks again! Hope to find a solution and learn from it.

Try to replace $_POST[‘valorBusqueda’]; in $_POST[‘testBousqeda???sorry about the spelling’]

Thanks for your response,

Don´t worry, it´s ok, it´s my fault, I should translate instead of copy-paste my code :smile:

I have tried changing that line but works same. It keeps autocompleting also. Javascript it´s not my friend…:confounded:

I make some corrections in your javascript code.as following:

$("#resultadoBusqueda").html('<p>JQUERY VACIO</p>'); //just when you load the page.

	function buscar() {
		var busqueda = $(input('#busqueda')).val();

		if (busqueda !== "") {
			$.post("buscar.php", {valorBusqueda: textoBusqueda}, function(mensaje) {
				$("#resultadoBusqueda").html(mensaje);
			});
		} else {
			$("#resultadoBusqueda").html('<p>JQUERY VACIO</p>'); //in case the ir no result.
		}
	}

Try with this code that i write and we will see.Open and your console to see if you have an errors

Thanks for your time and effort :slight_smile:

I have tried the code but keeps not working. Even de autocomplete=“off” is not working, that´s not normal.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.