dynamic select option list from MySQL based on autocomplete value selection?

Question

i want to fetch dynamic select option into SECOND text box after selecting autocomplete suggestion value into FIRST text box, For example, if i click on one of the autocomplete suggestions like "10 - computer" in the first text box (see my sample data below), I want to fetch the corresponding names (sahil, sumit, anil, shweta), and add them to the select in second text box.

If instead I click "12-History" I want to fetch those corresponding names (sanchita, riya, neha, pratik).

How to achieve this? Any help would be appreciated.

table

--
-- Table structure for table `stndb`
--

DROP TABLE IF EXISTS `stndb`;
CREATE TABLE IF NOT EXISTS `stndb` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Div_No` int(2) DEFAULT NULL,
  `Div_Name` varchar(30) DEFAULT NULL,
  `Student_Name` varchar(30) DEFAULT NULL,
   PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `stndb`
--

INSERT INTO `stndb` (`id`, `Div_No`, `Div_Name`, `Student_Name`) VALUES
(1, 10, 'computer', 'sahil'),
(2, 10, 'computer', 'sumit'),
(3, 10, 'computer', 'anil'),
(4, 10, 'computer', 'shweta'),
(5, 11, 'IT', 'apoorva'),
(6, 11, 'IT', 'neeta'),
(7, 11, 'IT', 'sachin'),
(8, 11, 'IT', 'priya'),
(9, 12, 'History', 'sanchita'),
(10, 12, 'History', 'riya'),
(11, 12, 'History', 'neha'),
(12, 12, 'History', 'pratik');

SearchForm.php

<html>
<head>
<title> Search Record </title> 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
</head>
<body>
<form action="" method ="POST" accept-charset="UTF-8" role="form" >
<fieldset>
    <div class="form-group">
        <input class="form-control" id="search" name="DivNumber" type="text" placeholder="Enter Division Number"  type="text" required>
    </div>
    <div class="form-group">
        <select input class="form-control" id="nameList" name="StName" type="text" placeholder="Select Student" type="text" readonly="readonly">
    </div>
    <input class="btn btn-lg btn-info btn-block" type="submit" value="Search  ">
</fieldset>
</form>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#search").autocomplete({
        source: 'search.php',
        minLength: 1,
    });
});
</script>

search.php

<?php
require_once 'conn.php';

$search = $_GET['term'];

$list = array();

$search = $conn->real_escape_string($search);   

$query = $conn->query("SELECT DISTINCT Div_No, Div_Name FROM `stndb` WHERE 
Div_No LIKE '$search%' OR Div_Name LIKE '$search%' LIMIT 10") or 
die(mysqli_connect_errno());

$rows = $query->num_rows;

if($rows > 0){
    while($fetch = $query->fetch_assoc()){

        $data['value'] = $fetch['Div_No'];
        $data['label'] = $fetch['Div_No']. "-". $fetch['Div_Name']."";  
        array_push($list, $data);
    }
 }

 echo json_encode($list);
?>

Possible duplicate of [How to populate a cascading Dropdown with JQuery](https://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery) — zod, Sep 13 '19 at 16:25
@zod hi i want to fetch select option after autocomplete suggestion selection using php and jquery..and not using select drop-down.. — ssbits, Sep 13 '19 at 16:30
change the event , you want to trigger the next call !! if you update the question with more jquery code , you may get an answer — zod, Sep 13 '19 at 16:34
@zod hi how to change event.. can you please add some code snippet using above reference.. — ssbits, Sep 13 '19 at 16:38
http://www.tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php — zod, Sep 13 '19 at 16:39
@zod hi i have edited my question please can you add some javascript and php code to populate select option from mysql based on autocomplete value selection. — ssbits, Sep 13 '19 at 16:52
@Dharman hi Dharman i don't know how to use PDO and prepared statement can you please add some prepared statement into my last question i stuck their.. — ssbits, Sep 13 '19 at 17:20
See https://stackoverflow.com/a/60496/1839439 and https://phpdelusions.net/ — Dharman, Sep 13 '19 at 17:21
@Dharman please change my search.php into PDO so that i can refer — ssbits, Sep 13 '19 at 17:27
I am on mobile and I can't do this for you. Try yourself, but first read the articles I linked. — Dharman, Sep 13 '19 at 17:28

score 0 · Answer 1 · answered Sep 13 '19 at 16:57

I think this is exactly you asking . You type on auto suggest and on click of that show the results .

Check that on live

jQuery UI Autocomplete: Overriding the Default Select Action

http://www.tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php

<!DOCTYPE html> 
<html> 
    <head>
    <title>jQuery UI AutoComplete : Overriding the Default Select Action</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
       <script>
        $(document).ready(function() {
         var cCities = ["Chicago", "California", "Chennai", "Cambridge", "Colombo", "Cairo"];

          var zipCode = { Chicago: 60290, California: 90001, Chennai: 600040, 
                         Cambridge:02138 , Colombo:00800 };

            $('#autoSuggest').autocomplete({
                source: cCities,
                select: function(event, ui) {
                    $('#zipCode').val(zipCode[ui.item.value]);
                }
            })

        });
    </script>   
</head> 
<body>
 <form>     
        <div class="ui-widget">
            <label for="autoSuggest">Name of Cities with C: </label><input id="autoSuggest"/><br><br>
            <label for="zipCode">Zip Code: </label><input id="zipCode"/>                      
        </div>
    </form>

</body>
</html>

dynamic select option list from MySQL based on autocomplete value selection?

1 Answers1