根据第一个自动完成

时间:2019-10-01 12:12:31

标签: javascript php jquery autocomplete jquery-ui-autocomplete

我正在尝试基于从Mysql数据库的第一个自动完成中选择的值来更新自动完成值。.我想更改以下脚本以从mysql数据库中获取数据,而不是从数组availabletags中获取数据。请帮助我根据第一次自动完成时选择的值更新第二个文本框...如何更改此脚本以从mysql获取数据...任何帮助将不胜感激。在此先感谢。

$(document).ready(function () {
     var availableTags = [
"Java",
"JavaScript",
"PHP"
];
$( "#tags" ).autocomplete({
    source: availableTags,
    select: function( event, ui ) {
        $( "#version" ).val('');
        //alert(ui.item.value);
        var selected_val = ui.item.value;        
        if(selected_val == "Java")
        {
            $( "#version" ).autocomplete({
                source: ['Java 3.1' ,'Java 3.2']
        });
    } 
    else if(selected_val == "PHP")
    {
        $( "#version" ).autocomplete({
            source: ['PHP 5.3.1' ,'PHP 5.3.4']
        });
    } 
    else if(selected_val == "JavaScript")
    {
        $( "#version" ).autocomplete({
            source: ['JavaScript 1.0' ,'JavaScript 2.5']
        });
    } 
  }    
 });
 });

html

<h4>Jquery-ui autocomplete. The "version" values will be updated based on 
the selection of the selection of "programming language"</h4>
<div class="ui-widget">
<label for="tags">Select programming language: </label>
<input id="tags"><small>Type like "j"</small>

<br>
<label for="tags">Select version: </label>
<input id="version">    
</div>

第一个文本框的自动完成

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

        minLength: 1,
    });
});
</script>

如果我有这样的数据库,如何更改jquery代码?

DROP TABLE IF EXISTS `languages`;
CREATE TABLE IF NOT EXISTS `languages` (
 `Prog_language` varchar(20) DEFAULT NULL,
 `version` varchar(20) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `languages` (`Prog_language`, `version`) VALUES
('Java', 'Java 3.1'),
('Java', 'Java 3.2'),
('JavaScript', 'JavaScript 1.0'),
('JavaScript', 'JavaScript 2.5'),
('PHP', 'PHP 5.3.1'),
('PHP', 'PHP 5.3.4');

我尝试使用php这样自动完成第一个文本框

search.php

    <?php
require_once 'conn.php';

$search = $_GET['term'];

$list = array();

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

$query = $conn->query("SELECT DISTINCT Prog_language FROM `languages` 
    WHERE Prog_language LIKE '$search%'") or die(mysqli_connect_errno());

$rows = $query->num_rows;

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

        $data['value'] = $fetch['Prog_language'];
        $data['label'] = $fetch['Prog_language'];  
        array_push($list, $data);
    }
}

echo json_encode($list);
   ?>

请帮助我根据第一个自动完成值选择来更新第二个自动完成文本框。

0 个答案:

没有答案