Autocomplete like Google with arrow key functionality

I have developed a basic search engine that retrieves data from a MySQL database using the PHP "LIKE" function (code provided below). Everything is functioning correctly, but I would like to enhance it so that users can navigate search results with arrow keys and press enter to select an item, similar to Google. Thank you for your help.

Here is my code:

<input type="text" name='search' id="searchbooks" onkeyup='getbooks(this.value);' value="search" onblur="setTimeout('removedrop()', 80);">

<div id='drop'></div>   

JAVASCRIPT:

function getbooks(value){
if (value!=""){


$.post('getbooks.php', {book: value},
    function (data) {
        $('#drop').html(data);
        doCSS();                
    });

    }
    else {

    $('#drop').html("");
    undoCSS();
    }

}
getbooks.php file:

<?php
include 'connect.php';

$book=mysql_real_escape_string(addslashes($_POST['book']));

$result=mysql_query("SELECT * FROM searchengine WHERE title LIKE '$book%'");


while ($row=mysql_fetch_assoc($result)){
$title=$row['title'];
$id=$row['id'];


echo "<div id='link'><a href='index.php?id=$id' id='words'>". $row['title'] ."</a></div>";

}
?>

Answer №1

If you're looking for a solution, I recommend trying out the jQuery autocomplete plugin. It's specifically designed to handle this type of scenario.

Give it a shot!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered when executing the migration fresh seed: SyntaxError, which indicates the absence of a closing parenthesis after the

Having trouble with a nextJS project that utilizes mikro-orm? Struggling to overcome this persistent error for days: C:\Users\BossTrails\Documents\core.nest-main_2\node_modules\.bin\mikro-orm:2 basedir=$(dirname "$(e ...

Ways to verify the value of a variable and invoke various functions

In my cart.php file, I have the following variables: <?php $readyTotal = $qty*price ?>; My objective is to check if the value of $readyTotal is greater than $1000 and then include a file that adds an item to the customer's cart. ($slq= msyql_ ...

What is the reason behind the failure of this ajax request?

I have encountered an issue with my ajax code. It seems to work in one file, but fails to function properly in other files. Below is the code snippet in question: $.ajax({ type: "GET", url: "get_child.php?pc_id="+pc_id.toString(), }).done(fun ...

The transition kicks in as soon as the page finishes loading

I am attempting to incorporate transitions on divs when the page loads, but I am encountering difficulties getting it to work. template <header> <transition name="slideLeft"> <div v-show="loaded" class="contents content-left"&g ...

Is there an effective way to merge two collections?

I came across an issue where I am attempting to merge two arrays that resemble the ones listed below: var participants = [ {id: 1, name: "abe"}, {id:2, name:"joe"} ]; var results = [ ...

How to set a canvas as the background of a div element

Check out my code snippet below: <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="borde ...

Issue with Angular failing to identify jQuery after transferring the dependency from package.json to bower.json

Initially, my project included angular, angular-bootstrap, and jquery in the package.json file, with everything being compiled using browserify. // package "dependencies": { "angular": "~1.4.6", "angular-bootstrap": "~0.12.2", "jquery": "~2.1. ...

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

The video rendered with fluent-ffmpeg appears to have an elongated image

I am working on combining an mp3 audio file with a jpg image file to create a new mp4 video. Although I have a functional fluent-ffmpeg command that accomplishes this task, there is an issue where the image gets stretched in the final output video, especia ...

Unable to implement a delegate method effectively

I am currently facing an issue with using Ajax in a bootstrap PHP page. The problem is that I cannot use functions inside the onsubmit event because the button does not exist beforehand. Therefore, I have to resort to using delegate methods instead. Howeve ...

Tips for correctly cloning a table row:

Currently, I am engaged with a Django project that involves incorporating a form within a table structure. <table name="mytable" id="table_purchase" role="grid"> <thead> <tr> <th class="text-center" hidden>No</th& ...

Express js routing issue ("Page Not Found")

Why do I receive a "Cannot GET /" message when I access my HTTP server at http://localhost:8000/? I am using Express JS for server-side routing and Angular for client-side. Some sources suggest that this error occurs because I haven't set a route for ...

Enhance Your Vue Tables with Unique Custom Filters

I'm currently working on implementing https://github.com/matfish2/vue-tables-2 in Vue 2.1.8. Everything seems to be functioning flawlessly, but I need to incorporate custom filters to format certain fields based on their values. In my options object ...

How can I iterate through multiple rows in JavaScript?

Feeling stuck, the simple yet dreaded for loop has become my nemesis and I could really use some guidance. Currently, I have a Google sheet with 3 rows (excluding headers) and 8 columns. As users input data via a web app, the number of rows will dynamicall ...

sum inside the while loop

Below is the provided HTML: <form> <textarea id="input1"></textarea> <textarea id="input2"></textarea> <span></span> </form> The following JavaScript code is included: $("#input2").keyup{ var a = ...

Show the URL hash as url.com/something#/ rather than url.com/something/#/

I'm encountering a peculiar issue with my Angular v1.6.5 setup. My routes seem to be acting strangely, for example: $routeProvider .when('/', { templateUrl: 'myTemplate', controller: 'myController', method: &apo ...

How to effectively utilize JSON responses with jQuery Mobile?

I've been facing an issue with working on my JSON result in JavaScript. Can anyone provide some insight? Even though the JSON call returns a success status code (200) and I can view the data in Firebug, no alert is being displayed. $(document).on(& ...

Executing 'npm run bundle' with Webpack results in an ERR! with code ELIFECYCLE

As someone new to using Webpack with AngularJS apps, I am eager to learn but facing some challenges. Following the guide by Ken Howard has been helpful, but I encounter an error when attempting to run the bundle. Article by Ken Howard that I've been ...

Personalized AngularJS required text

After utilizing the built-in AngularJS directive required and encountering a validation error, I receive a small popup near the field displaying "Please fill out this field". My issue lies in needing the text to be displayed in another language. How should ...

JSON output for creating interactive charts using Highcharts

After much perseverance, I have successfully generated a chart. However, I am facing an issue where the data from JSON is not being displayed - resulting in a blank chart. The chart options currently look like this: series : [{ name: '2000' ...