Jump to content

how to submit data with ajax after clicking one of the listed value on the suggestion box?


Recommended Posts

here my sample code

    <input id="query" type="text" name="query" placeholder="search here..." autocomplete="off">
    <button type="submit" value="query" >search</button>
	<div class="sugbx"></div>

//php code, assume we already run a whole php code
<ul class="list-group list-unstyled" style="cursor:pointer; color: #191919; position:absolute; top:12px;">
foreach($query as $movie) {
<li class="list-group-item" onClick="searchValue('<?php echo $movie["movie_name"]; ?>'),;"><?php echo $movie["movie_name"]; ?></li>
<?php } ?>
<?php } ?>

//ajax here
		type: 'GET',
		url: 'phpcode.php',
		success: function(data){
function searchValue(val) {


the input accept the value only  after selecting one of the listed value on the suggesstion box  and then i have to click the submit  button the problem is, how to submit the value accepted when a list is clicked 

Link to comment
Share on other sites

Here's an example which uses the "sakila" film database, displaying film titles for the selected guidance rating

include 'db_inc.php';                //  DATABASE 
$db = pdoConnect('sakila');          //  CONNECTION STUFF

    if (isset($_GET['ajax'])) {
        $res = $db->prepare("SELECT title
                             FROM film
                             WHERE rating = ?
                             ORDER BY title
        $res->execute( [ $_GET['rating'] ] ) ;
        $films = $res->fetchAll();
        exit(json_encode($films)) ;

    $res = $db->query("SELECT DISTINCT rating
                       FROM film
                       ORDER BY rating
    $rating_list = '';
    foreach ($res as $r) {
        $rating_list .= '<li class="w3-light-gray w3-hover-blue">'.$r['rating'].'</li>';
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="creation-date" content="05/10/2019">
<title>Movies by Rating</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        $("li").click(function() {
            var rating = $(this).html()
                "" ,
                {"ajax":1, "rating":rating} ,
                function (response) {
                    $.each(response, function(k,v) {
                } ,
    <h1>Films by Rating</h1>
    <div class="w3-ul w3-card-4 w3-margin w3-hoverable" style="width:25%; float:left; position: fixed">
    <div id="search-results" class="w3-content w3-margin w3-padding "style="float:right; width:70%;">


Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.