mdbAutocomplete TypeAhead

Topic: mdbAutocomplete TypeAhead

Denzil free asked 5 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.

Add comment

Denzil free answered 5 years ago

0 0 Best answer

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 5 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 5 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 5 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 5 years ago

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

MDBootstrap staff commented 5 years ago

Great, I close the topic.

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Closed

This topic is closed.

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

Denzil

200Support score
10Questions 15Answers 0Snippets