Topic: Help to feed autocomplete with Php+ajax+MySQL
decosvaldo pro asked 7 years ago
Andrew Ford pro premium priority answered 5 years ago
I'm using MDBootstrap 4.8.5, and I have this working.
var input = $('#autocomplete').val();
var options = function() {
var returned_info = null;
$.ajax({
method: 'POST',
url: 'your/ajax/script.php',
data: 'input=' + input,
dataType: 'json', // expect a JSON response
async: false,
global: false,
success: function(data) {
returned_info = data;
}
});
return returned_info;
}();
$('input#autocomplete').mdbAutocomplete({
data: options
});
Your PHP script should look something like:
<?php
// DB Connection Info
header( 'Content-Type: application/json' );
$input = trim($_REQUEST['input']);
$input = strval($input);
$input = filter_var( $input, FILTER_SANITIZE_STRING );
if ( isset( $input ) ) {
$input = $input . '%';
$stmt = $conn->prepare( "SELECT [column(s)] FROM [table(s)] WHERE [column(s) have] LIKE :input" );
$stmt->bindParam( ':input', $input );
$stmt->execute();
if ( $stmt->rowCount() > 0 ) {
while ( $row = $stmt->fetch( PDO::FETCH_ASSOC ) ) {
$country_result[] = $row['name'];
}
print(json_encode($country_result)); // returns results as JSON which is what your AJAX is expecting
} else {
// having trouble converting this to JSON personally
//echo( '<p class="text-center">No Results Found!</p>' );
}
}
$stmt = null;
$conn = null;
?>
Denzil answered 5 years ago
Thanks, this will work, but only to populate 'options' during initial page load. It will also create Deprecation warning in console. How can you make it working similar to twitter/typeahead?
MDBootstrap staff pro premium priority commented 5 years ago
Hi Denzil, What similarity you have in mind? You can always modify this code to change the moment of load and make ajax call whenever you want by changing the data in autocomplete. If you want to modify the data given to autocomplete I do not recommend doing that after you initialize the component.
Autocomplete supports adding new options by typing them in the input (with autocomplete initialized) and pressing "enter". You can always work with that since this does not burden resources with continuous autocomplete destroy and initialize methods.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Bartłomiej Malanowski staff pro premium commented 7 years ago
We don't have example or solution for Autocomplete with AJAX. However, I'll keep that question open so anyone could answer