Auto_complete does not work in Pro version

MDB SupportCategory: MDB jQueryAuto_complete does not work in Pro version
isurigamage asked 1 week ago in MDB pro, version:4.5.1

Hello,

I have Pro version and I am trying to implement mdb autocomplete and it says mdb_autocomplete is not a function. Previously mdb-select did not work for me either.

 

I am not sure some plugging are missing but other pro components like multi-item-carousal are working fine.

Below is my code for auto complete.

JS

$(‘#keyword’).keyup(function(){
vars=$(this).val();
console.log(s);
if(s.length>0) {
$.ajax({
url:’/static/FF/json/autocomplete.json’,
async:true,
success:function(results)
{
if(results){
console.dir(results.length)
console.log(results)
$(‘.mdb-autocomplete’).mdb_autocomplete({
data:results
});

}else{
console.log(‘no data found’)
}

}
});
};
});

HTML

<divclass=”md-form”>
<!– Search form –>
<inputid=”keyword”class=”form-control mdb-autocomplete keywords”type=”text”placeholder=”Keywords”aria-label=”Search”>
<buttonclass=”mdb-autocomplete-clear”>
<svgfill=”#000000″height=”24″viewBox=”0 0 24 24″width=”24″xmlns=”https://www.w3.org/2000/svg”&gt;
<pathd=”M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z”/>
<pathd=”M0 0h24v24H0z”fill=”none”/>
</svg>
</button>
</div>

Looking forward to hear from you soon. I need to implement this function ASAP.

Thank you

2 Answers
Mikołaj Smoleński answered 7 days ago

Hi,

Please test Your project with the basic example from autocomplete docs and let us know if the issue still appears:

Bootstrap Autocomplete

Regards

isurigamage replied 3 days ago

No other JS modules did not work. I tried to initialize select and it did not work either. what is the solution for this?

Mikołaj Smoleński replied 5 days ago

It is most often problem with importing our scripts. Are You sure that all other js components are working clear? For example – can You initialize our Select Input?

isurigamage replied 6 days ago

Hi Mikolaj,

I added the basic example to my project and I can still see the issue.
Uncaught TypeError: $(…).mdb_autocomplete is not a function.

What do you think the issue with the project. is it pro licence issue? I am using

git+https://oauth2:xxxxxxxxxxxxxxxxxxx@git.mdbootstrap.com/mdb/jquery/jq-pro.git

Thank you

Mikołaj Smoleński answered 1 day ago

Make sure that Your code looks similar to this and that all files are placed in an accurate directories:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
</head>

 

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.js"></script>
<script>
$(document).ready(function () {
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
$('.show-me').click();
});
</script>

Best Regards