Question

我想在第一文本框中选择自动完成建议值后，将动态选择选项提取到第二文本框中，例如，如果我在第一个文本框中单击自动完成建议之一，例如“ 10-computer”（请参见下面的示例数据），我想获取相应的名称（sahil，sumit，anil，shweta），并将其添加到第二个文本框中的选择中。

相反，如果我单击“ 12历史记录”，我想获取那些相应的名称（sanchita，riya，neha，pratik）。

如何实现？任何帮助将不胜感激。

表

--
-- 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);
?>

Answer 1

我认为这正是您的要求。您键入自动建议，然后单击以显示结果。

实时检查

jQuery UI自动完成：覆盖默认的Select操作

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>

基于自动完成值选择的MySQL动态选择选项列表？

1 个答案: