自动完成两个字段没有发生任何事情

Question

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个文本框上实现自动完成文本框，当选择其中一个文本框时，会在该文本框中放置一个值。 I think I should be able to explain easier with an example. 我想我应该能够用一个例子来解释。

I have 2 textboxes and they have autocomplete that are taken from the same table/database. 我有2个文本框，他们有自动完成，取自同一个表/数据库。 For example, I have a column foo and it contains foo and foo2 and column bar that contains bar and bar2. 例如，我有一个列foo，它包含foo和foo2以及包含bar和bar2的列栏。 So this textbox has whatever column foo has and the other has whatever column bar has. 因此，此文本框具有foo所具有的任何列，而另一列具有任何列栏。 When I select foo from textbox1, textbox2 will have bar. 当我从textbox1中选择foo时，textbox2会有条形码。 When I select bar2 from textbox2, textbox1 will have foo2. 当我从textbox2中选择bar2时，textbox1将具有foo2。

I hope that made sense, I have the following javascript 我希望有道理，我有以下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 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>

script sources 脚本来源

<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>

and the ajaxi.php file 和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);

When I try to type something, nothing happens. 当我尝试输入某些内容时，没有任何反应。 Advance thanks for the help. 感谢您的帮助。

I got this from here . 我从这里得到了这个。 I tried understanding what each does but i still fail to get it to work. 我试着理解每个人做了什么，但我仍然无法让它发挥作用。

Answer 1

Step 1: Please check all the necessary scripts are loaded in your html file... 第1步：请检查您的html文件中加载的所有必要脚本...

step 2: Check is there any JavaScript errors are present, If yes please clear those JavaScript errors... 第2步：检查是否存在任何JavaScript错误，如果是，请清除这些JavaScript错误...

Step 3: Please add this script at the bottom of your html file... 第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>

Step 4: Next check when you type something does it make ajax call to ajaxi.php file.. 第4步：下次检查输入内容时是否对ajaxi.php文件进行ajax调用..

Step 5: If yes Check response of you Ajax call... 第5步：如果是，请检查Ajax调用的响应...

I checked your pasted script everything fine.. 我检查了你粘贴的脚本一切都很好..

Refer this tutorial to know more http://www.smarttutorials.net/jquery-autocomplete-multiple-fields-using-ajax-php-mysql-example/ 请参阅本教程以了解更多信息http://www.smarttutorials.net/jquery-autocomplete-multiple-fields-using-ajax-php-mysql-example/

自动完成两个字段没有发生任何事情

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-18 07:14:19

自动完成两个字段没有发生任何事情

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-18 07:14:19

解决方案1
0 已采纳 2016-09-18 07:14:19