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

Having issues passing parameters with Ajax, Python Bottle, Jquery, and JSON collaboration

Every time I make an AJAX request POST, the newUser() function seems to be ignoring any arguments being passed even though I have filled out both userInput and passInput fields. Here's the JS/JQ/AJAX code snippet: var userInput = document ...

Is it possible to utilize a single command in Discord.js to send multiple embeds?

Is there a way to create a unique bot in Node.js (using Discord.js) by utilizing Visual Studio Code? This exceptional bot should be capable of responding with various embed messages when given one specific command. I attempted using command handler, but u ...

Implementing optimistic updates with React-query mutations

Hello everyone! I'm a newcomer to react-query and I've been experimenting with making an optimistic update using the mutation function. However, I've encountered a problem where I'm unable to retrieve the previous value from the query. ...

Updating the React State is dependent on the presence of a useless state variable in addition to the necessary state variable being set

In my current setup, the state is structured as follows: const [items, setItems] = useState([] as CartItemType[]); const [id, setId] = useState<number | undefined>(); The id variable seems unnecessary in this context and serves no purpose in my appl ...

Retrieve the current date and time in JSON format using moment.js for the local

Below is the code snippet I am working with: var startTime = moment("2020-09-08 16:00:00").toDate(); console.log(startTime) const data = {start: startTime} console.log(JSON.stringify(data) After running it, the result is as follows: Tue Sep 08 ...

Retrieve information from arrays within objects in a nested structure

I am working with structured data that looks like the example below: const arr = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: 'Redwood forest& ...

Tips for adding a "return" button to a page loaded with AJAX

While working with jQuery in prototype to load pages using Ajax, I've come across a feature on big sites like Facebook and Twitter that I'd like to implement: a 'back' button that takes the user back to the previous page when clicked. S ...

Is it possible to prompt npm to install a sub-dependency from a GitHub pull request?

Currently, I'm in the process of setting up geofirestore, which has a dependency on geofirestore-core. However, there is an existing bug in geofirestore-core that has been addressed in a pull request. How can I make sure that my geofirestore installa ...

User authentication in MEAN Stack using passport-local and $routeProvider for routing

When it comes to logging users into my application, I am utilizing passport-local. The login process involves a function called in my AngularJS controller: $http.post('/login', $scope.user).then(function (response){ if(response.data.success) ...

The charts created using chartjs-vue display no data

After following some examples to create a test chart, I am facing an issue where the chart renders blank with dummy data. My initial suspicion is that maybe the options are not being passed for the lines, but it seems like dataCollection is not being popu ...

The function is defined, but it cannot be set to null

Having trouble understanding this error message "Cannot set properties of null." I'm attempting to update the innerHTML with the output text from four functions that my button triggers. However, it seems to be stopping at the first function now even t ...

Calculating the percentage in a jQuery Slider

For a while now, I've been using var slideWidth = 420; to set the width of sliders and then $('#slideInner').css('width', slideWidth * numberOfSlides); to calculate the total width of all sliders effectively in pixels. An Issue Ar ...

An async/await global variable in Javascript is initially defined, then ultimately becomes undefined

As I work on establishing a mongoDB endpoint with NodeJS and implementing this backend, I encounter an issue within the code. In particular, the function static async injectDB sets a global variable let restaurants that is then accessed by another function ...

Step-by-step guide on integrating async and await functionality into Vuetify rules using an ajax call

I'm currently using Vuetify form validation to validate an input field, and I'm exploring the possibility of making an ajax get call await so that I can utilize the result in a rule. However, my attempts at this approach have not been successful! ...

Ways to implement the jQuery code to manipulate the content fetched using ajax

I have a bit of a puzzling situation that I could use some help with. I am currently retrieving content from an external PHP file using jQuery AJAX in my HTML document. Here is a breakdown of the setup: +-------------------+ | some contents 1 | (this w ...

Invalid content detected in React child element - specifically, a [object Promise] was found. This issue has been identified in next js

Why am I encountering an error when I convert my page into an async function? Everything runs smoothly when it's not an async function. The only change is that it returns a pending object, which is not the desired outcome. This is how data is being f ...

The error message encountered is: "TypeError: Unable to access the 'apply' property of an undefined object within the

Currently in the process of developing a node js application with the integration of DHTMLX Scheduler feature on one of the pages. However, my progress is hindered by a recurring issue upon loading the page, resulting in the following error message: TypeE ...

Limit entry to a webpage based on the user's category

Greetings, I have successfully implemented a login feature using C# webservice and ajax calls. However, there seems to be a security issue that I need assistance with. In my application, I have two types of users - admin and regular user. The problem arise ...

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Situation: I want to create a Zingchart graph from a CSV file containing 37 columns. The header in the CSV file will be used as the legend for the graph. Issue: When I define less than 10 elements in the header (including the X-axis name), everything wo ...

a class instance in Java Script returned as undefined

Having sought resolution for this question once before, I find myself revisiting it as the issue still persists. My apologies for the duplicate post. The first file in question is block.js: class Block{ constructor(timeStamp, lastBlockHash, thisBloc ...