自动完成两个字段没有任何反应答案

【问题标题】：Autocomplete two fields nothing happening自动完成两个字段没有任何反应
【发布时间】：2017-01-24 09:02:54
【问题描述】：

I'm trying to implement a autocomplete textbox on 2 textboxes that when one of them is selected, a value is placed in that textbox.我想我应该能够通过一个例子更容易地解释。

我有 2 个文本框，它们具有来自同一个表/数据库的自动完成功能。例如，我有一个 foo 列，它包含 foo 和 foo2 以及包含 bar 和 bar2 的列 bar。所以这个文本框有任何列 foo 有，而另一个有任何列 bar 有。当我从 textbox1 中选择 foo 时，textbox2 将有 bar。当我从 textbox2 中选择 bar2 时，textbox1 将有 foo2。

我希望这是有道理的，我有以下 javascript

<script>
$('#school_id').autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'ajaxi.php',
        dataType: "json",
        method: 'post',
        data: {
           name_startsWith: request.term,
           type: 'school_table',
           row_num : 1
        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[0],
                    value: code[0],
                    data : item
                }
            }));
        }
    });
},
autoFocus: true,            
minLength: 0,
select: function( event, ui ) {
    var names = ui.item.data.split("|");                        
    $('#school_name').val(names[1]);
}               
});
</script>

html

<body>
<form id='students' method='post' name='students' action='test.php'>
<input class="form-control" type='text' id='school_id' name='school_id'/>
<input class="form-control" type='text' id='school_name' name='school_name'/>
</form>
</body>

脚本来源

<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

还有 ajaxi.php 文件

if($_POST['type'] == 'school_table'){
$row_num = $_POST['row_num'];
$name = $_POST['name_startsWith'];
$query = "SELECT school_id, school_name FROM school where school_id LIKE '".$name."%'";
$result = mysqli_query($con, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $name = $row['school_id'].'|'.$row['school_name'].'|'.$row_num;
    array_push($data, $name);   
}
echo json_encode($data);

当我尝试输入内容时，什么也没有发生。提前感谢您的帮助。

我从here 得到这个。我试着理解每个人的作用，但我仍然无法让它发挥作用。

【问题讨论】：

我只是注意到 javascript 中的 school_id_1 在文本框 (school_id) 中是不同的，所以我也更改了这些。仍然不起作用，所以我将它们恢复为原来的样子。

标签： javascript php jquery mysql autocomplete

【解决方案1】：

第 1 步：请检查所有必要的脚本是否已加载到您的 html 文件中...

第 2 步：检查是否存在任何 JavaScript 错误，如果是，请清除那些 JavaScript 错误...

第 3 步：请将此脚本添加到 html 文件的底部...

<script>
        $(document).ready(function(){
            $('#school_id').autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url : 'ajaxi.php',
                        dataType: "json",
                        method: 'post',
                        data: {
                           name_startsWith: request.term,
                           type: 'school_table',
                           row_num : 1
                        },
                         success: function( data ) {
                             response( $.map( data, function( item ) {
                                var code = item.split("|");
                                return {
                                    label: code[0],
                                    value: code[0],
                                    data : item
                                }
                            }));
                        }
                    });
                },
                autoFocus: true,            
                minLength: 0,
                select: function( event, ui ) {
                    var names = ui.item.data.split("|");                        
                    $('#school_name').val(names[1]);
                }               
            });
        });

    </script>

第 4 步：接下来检查当您输入某些内容时，它是否会对 ajaxi.php 文件进行 ajax 调用..

第 5 步：如果是，请检查您的 Ajax 调用的响应...

我检查了你粘贴的脚本一切正常..

【讨论】：