Topic: Help to feed autocomplete with Php+ajax+MySQL

decosvaldo pro asked 6 years ago


Hi, is there anybody who has a sample code to combine data from a MySQL database with PHP+Ajax and MDB autocomplete? https://mdbootstrap.com/components/inputs/#autocomplete

Bartłomiej Malanowski staff commented 6 years ago

We don't have example or solution for Autocomplete with AJAX. However, I'll keep that question open so anyone could answer

Andrew Ford priority answered 4 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 free answered 4 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 commented 4 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags