ThisIsABird ThisIsABird - 2 months ago 13
jQuery Question

Autocomplete two fields nothing happening

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. 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. For example, I have a column foo and it contains foo and foo2 and column bar that contains bar and bar2. So this textbox has whatever column foo has and the other has whatever column bar has. When I select foo from textbox1, textbox2 will have bar. When I select bar2 from textbox2, textbox1 will have foo2.

I hope that made sense, I have the following 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>


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

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

Step 1: Please check all the necessary scripts are loaded in your html file...

step 2: Check is there any JavaScript errors are present, If yes please clear those JavaScript errors...

Step 3: Please add this script at the bottom of your html file...

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

Step 5: If yes Check response of you Ajax call...

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/

Comments