Question

我试图在2个文本框上实现自动完成文本框，当选择其中一个文本框时，会在该文本框中放置一个值。我想我应该能够用一个例子来解释。

我有两个文本框，它们具有从同一个表/数据库中获取的自动完成功能。例如，我有一个列foo，它包含foo和foo2以及包含bar和bar2的列栏。因此，此文本框具有foo所具有的任何列，而另一列具有任何列栏。当我从textbox1中选择foo时，textbox2会有条形码。当我从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得到的。我试着理解每个人的所作所为，但我仍然无法让它发挥作用。

Answer 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呼叫的响应...

我检查了你粘贴的脚本一切都很好..

请参阅本教程以了解更多http://www.smarttutorials.net/jquery-autocomplete-multiple-fields-using-ajax-php-mysql-example/

自动完成两个字段没有任何问题

1 个答案: