Auto_complete does not work in Pro version

Topic: Auto_complete does not work in Pro version

isurigamage free asked 5 years ago

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

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Make sure that Your code looks similar to this and that all files are placed in an accurate directories:
<pre><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Material Design Bootstrap</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/mdb.min.css">

<link rel="stylesheet" href="css/style.css">
</head></pre>
 
<pre>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/popper.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<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></pre>
Best Regards

Please insert min. 20 characters.

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

isurigamage free commented 5 years ago

Hi Thank you for the reply. Files are placed in accurate directories and i am still getting the issue. when I search mdb_autocomplete in mdb.js and mdb.min.js , no results found. what do you think the issue here? how can I fix this issue? looking forward to hearing from you soon. Thank you Isuri

Mikołaj Smoleński staff commented 5 years ago

Are You sure that our scripts are PRO version?

isurigamage free commented 5 years ago

Yes Mikolaj, My client bought the Pro version and i installed it using git+https://oauth2:xxxxxxxxxxxxxxxxxxx@git.mdbootstrap.com/mdb/jquery/jq-pro.git.

Mikołaj Smoleński staff commented 5 years ago

Do You have any errors in the console (Shift Ctrl i)?

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Hi, Please test Your project with the basic example from autocomplete docs and let us know if the issue still appears: https://mdbootstrap.com/components/bootstrap-autocomplete/ Regards

isurigamage free commented 5 years 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 staff commented 5 years 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 free commented 5 years 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?

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

isurigamage

0Support score
1Questions 0Answers 0Snippets