1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: mdbAutocomplete TypeAhead

Denzil free asked 4 years ago

Any chance to make mdbAutocomplete working with ajax produced data instead of javascript array, to make it similar to Typeahead Bootstrap 3 library.

I have tried to populate javascript array with new data every time user change input value but it looks really clumsy and will effect performance for sure.

Or another option, can I use typeahead with MD input and design it to work as good as autocomplete.

Denzil free answered 4 years ago

Thanks Piotr,

That is exactly the problem, Ajax calls async, so this solutions will be slow, and clumsy.

If I was to use bootstrap typeahead, can I style mdb input to look the same as autocomplete?

Thanks.

MDBootstrap staff commented 4 years ago

What do you mean? The simple styling of the input to match autocomplete? Our both components have material designs ready to use. If you want to customize it feel free to modify our styles or simply add your own custom ones.

Denzil free commented 4 years ago

Ideally I would like to use autocomplete same way we use Typeahead, with data pulled from ajax call. But if this is impossible, I would not mind to use typeahead js with simple mdb input but styling results to match input design.

MDBootstrap staff commented 4 years ago

I am afraid we are bonded to jQuery functionality and if this is not possible via jQuery.ajax() you would have to prepare this functionality on your own. Styling results to match input design is pretty straight forward. To achieve that you can set any given input value to match your data and display it this way.

Can I help you with something else? Piotr

Denzil free commented 4 years ago

Thanks, looks like it. I'll try to style it.

MDBootstrap staff commented 4 years ago

Great, I close the topic.

MDBootstrap staff answered 4 years ago

Hi Denzil,

You can always get your ajax call and convert the data to the table using jQuery. You need to keep in mind that ajax call is asynchronous and you have to wait for it to end before working with the data. You can use code similar to this:

$.ajax({
    url: "/destination/",
    type: "POST",
    dataType: "json",
    data: {
        id: formId
    }
})
.done(function( data ) {
// the data is ready
});

After you are certain that your data is ready simply just join the strings with .join(',')

If you need additional help I am here for you.

Best Regards, Piotr

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.10
  • Device: Mac
  • Browser: Chrome
  • OS: MacOSX 10.14.6
  • Provided sample code: No
  • Provided link: No
Tags
mdbautocomplete
About author
Denzil
200Support score
10Questions 15Answers 0Snippets